/* ================================================================
       WCAG 2.2 – KLEURPALET
       Alle kleuren getest op contrast:
       - Normale tekst: min 4.5:1
       - Grote tekst / UI-componenten: min 3:1
    ================================================================ */
    :root {
      --green-dark:      #2d5429;   /* op wit: 8.5:1 ✓ */
      --green-mid:       #3e7a2e;   /* op wit: 5.4:1 ✓ */
      --green-light:     #93A136;   /* op wit: 4.6:1 ✓ */
      --orange:          #b85c00;   /* op wit: 5.7:1 ✓ */
      --orange-hover:    #8f4500;   /* op wit: 7.8:1 ✓ */
      --cta-bg:          #7a3800;   /* achtergrond CTA-banner */
      --cream:           #fdf8f0;
      --text-dark:       #1a1a1a;   /* op wit: 17:1 ✓ */
      --text-muted:      #595959;   /* op wit: 7.0:1 ✓ */
      --white:           #ffffff;
      --focus-ring:      #2d5429;   /* universeel blauw */
      --shadow:          0 4px 18px rgba(0,0,0,.12);
      --radius:          12px;
      --badge-open:      #1b5e20;   /* op wit: 9.4:1 ✓ */
      --badge-closed:    #b71c1c;   /* op wit: 7.9:1 ✓ */
    }

    /* ================================================================
       GLOBALE BASIS
    ================================================================ */
    *, *::before, *::after { box-sizing: border-box; }

    /* WCAG 2.3.3 – Animatie pauzeren bij voorkeur */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
      .carousel { --bs-carousel-transition-duration: 0ms; }
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Nunito', sans-serif;
      color: var(--text-dark);
      background: var(--cream);
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* WCAG 1.4.12 – Tekst-spatiëring */
    p { margin-bottom: 1em; line-height: 1.75; }

    h1, h2, h3, h4, h5, h6 {
      @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');
      font-family: 'Baloo 2', cursive;
      font-weight: 300;
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: var(--green-dark);
    }

    .banner h1 {color: var(--white);}

    a { color: var(--green-dark); text-decoration: none; }

    /*
      Caveat leest het fijnst op grotere groottes.
      WCAG-verantwoord gebruik: alleen voor visuele koppen ≥ 1.5rem,
      bodytekst blijft Nunito.
    */
    h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
    h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
    h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
    h4 { font-size: 1.4rem; }

    /* Kleinere koppen in specifieke UI-contexten (footer, badges) terug naar Nunito */
    footer h2,
    .news-card-body h3 {
      font-size: 1.6rem;  /* Caveat – nog steeds groot genoeg */
    }

    /* Standaard links onderstreept (WCAG 1.4.1 / 3.2) */
    a {
      color: var(--green-dark);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

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

    /* Uitzonderingen op onderstreping in navigatiecontexten */
    .navbar-nav a,
    .social-icons a,
    .btn,
    .btn-kibo,
    .btn-orange,
    .btn-white,
    .virtual-tour-btn,
    .animal-card-link { text-decoration: none; }

    img { max-width: 100%; height: auto; }

    .parallax-divider {
      display: block;
      width: 100%;
      min-height: 280px;
      background-color: var(--green-dark);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
    }

    @media (max-width: 767px) {
      .parallax-divider {
        min-height: 220px;
        background-attachment: scroll;
      }
    }

    /* ================================================================
       FOCUS – WCAG 2.4.11 / 2.4.12
       Minimaal 3px outline, voldoende contrast
    ================================================================ */
    :focus-visible {
      outline: 3px solid var(--white);
      outline-offset: 3px;
      border-radius: 4px;
      box-shadow: 0 0 0 4px var(--focus-ring);
    }

    .btn:focus-visible,
    .nav-link:focus-visible,
    .dropdown-item:focus-visible,
    .navbar-toggler:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
      box-shadow: none;
    }

    /* ================================================================
       SKIP NAVIGATION – WCAG 2.4.1
    ================================================================ */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 1rem;
      z-index: 9999;
      background: var(--focus-ring);
      color: #fff;
      padding: .75rem 1.5rem;
      border-radius: 0 0 8px 8px;
      font-weight: 700;
      font-size: 1rem;
      text-decoration: none;
    }
    .skip-link:focus {
      top: 0;
      outline: 3px solid #fff;
      outline-offset: 2px;
    }

    /* ================================================================
       KNOPPEN – min. 44×44px target (WCAG 2.5.8)
    ================================================================ */
    .btn-kibo {
      background: var(--green-mid);
      color: #fff;
      border: 2px solid transparent;
      border-radius: 30px;
      padding: .6rem 1.6rem;
      font-weight: 700;
      font-family: 'Nunito', sans-serif;
      font-size: 1rem;
      min-height: 44px;
      min-width: 44px;
      display: inline-flex;
      align-items: center;
      transition: background .2s, transform .15s;
    }
    .btn-kibo:hover { background: var(--green-dark); color: #fff; transform: translateY(-2px); }

    .btn-orange {
      background: var(--orange);
      color: #fff;
      border: 2px solid transparent;
      border-radius: 30px;
      padding: .6rem 1.6rem;
      font-weight: 700;
      font-family: 'Nunito', sans-serif;
      font-size: 1rem;
      min-height: 44px;
      min-width: 44px;
      display: inline-flex;
      align-items: center;
      transition: background .2s, transform .15s;
    }
    .btn-orange:hover { background: var(--orange-hover); color: #fff; transform: translateY(-2px); }

    /* ================================================================
       TOP BAR
    ================================================================ */
    .topbar {
      background: var(--green-dark);
      color: #e8f5e9;   /* contrast op groen-donker: 10:1 ✓ */
      font-size: .875rem;
      padding: .4rem 0;
    }
    .topbar a {
      color: #e8f5e9;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .topbar a:hover { color: #fff; }

    .topbar a:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
      border-radius: 3px;
    }

    /* ================================================================
       NAVBAR
    ================================================================ */
    .navbar {
      background: #fff;
      box-shadow: 0 2px 12px rgba(0,0,0,.1);
      padding: .6rem 0;
      position: sticky;
      top: 0;
      z-index: 1030;
    }
    .navbar-brand img {
      height: 200px;
      object-fit: contain;
      top: -10px;
    }

    .navbar-nav .nav-link {
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 1.25rem;        /* Caveat min. 1.2rem voor goede leesbaarheid */
      letter-spacing: 0.02em;
      color: var(--text-dark) !important;
      padding: .55rem .9rem !important;
      border-radius: 8px;
      min-height: 44px;
      display: flex;
      align-items: center;
      transition: background .18s, color .18s;
    }
    .navbar-nav .nav-link:hover {
      background: #d4edcb;
      color: var(--green-dark) !important;
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link[aria-current="page"] {
      background: var(--green-dark);
      color: #fff !important;
    }

    .dropdown-menu {
      border: 2px solid #ccc;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: .5rem;
    }
    .dropdown-item {
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 1.2rem;         /* Caveat min. 1.2rem */
      letter-spacing: 0.02em;
      border-radius: 8px;
      padding: .55rem .9rem;
      min-height: 44px;
      display: flex;
      align-items: center;
      color: var(--text-dark);
    }
    .dropdown-item:hover, .dropdown-item:focus {
      background: #d4edcb;
      color: var(--green-dark);
    }

    /* Dropdown-toggle als <button> */
    .nav-dropdown-btn {
      background: none;
      border: none;
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 1.25rem;        /* zelfde als nav-link */
      letter-spacing: 0.02em;
      color: var(--text-dark);
      padding: .55rem .9rem;
      border-radius: 8px;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: .35rem;
      cursor: pointer;
      transition: background .18s, color .18s;
    }
    .nav-dropdown-btn:hover {
      background: #d4edcb;
      color: var(--green-dark);
    }
    .nav-dropdown-btn[aria-expanded="true"] {
      background: var(--green-dark);
      color: #fff;
    }

    .navbar-toggler {
      min-width: 44px;
      min-height: 44px;
      padding: .5rem;
    }

     @media (max-width: 992px) {
      .navbar-brand img {
        height: 75px;
        top: -3px;
      }
    }
    /* ================================================================
       HERO CAROUSEL
    ================================================================ */
    #heroCarousel .carousel-item {
      height: 480px;
      background: var(--green-dark);
      position: relative;
      overflow: hidden;
    }
    #heroCarousel .carousel-item img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    #heroCarousel .carousel-caption {
      /* Volledige breedte balk onderaan slide, lichtgroen (#4a8f38) */
      background: #8B9933;
      border-radius: 0;
      padding: 1rem 2rem;
      bottom: 30px;
      left: 0;
      right: 0;
      width: 100%;
      transform: none;
      white-space: nowrap;
      max-width: 100%;
      text-align: left;
      opacity: 1;
      text-align: center;
    }
    /*
      Wit op --green-light (#4a8f38): 4.6:1
      WCAG 1.4.3: voldoet voor grote/vette tekst (≥18pt bold = ≥24px bold)
      h2 hier is clamp(1.8rem→2.4rem) bold → ruim ≥24px ✓
    */
    #heroCarousel .carousel-caption h2 {
      font-size: 2.6rem;
      margin: 0;
      color: #fff;
      letter-spacing: 0.03em;
    }

    /* Pauzeknop – WCAG 2.2.2 */
    #carouselPauseBtn {
      position: absolute;
      top: 12px; right: 12px;
      z-index: 10;
      background: rgba(0,0,0,.7);
      color: #fff;
      border: 2px solid #fff;
      border-radius: 8px;
      padding: .4rem .85rem;
      font-size: .875rem;
      font-weight: 700;
      cursor: pointer;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: .4rem;
      transition: background .2s;
    }
    #carouselPauseBtn:hover { background: rgba(0,0,0,.9); }

    /* Carousel indicators */
    #heroCarousel .carousel-indicators [data-bs-target] {
      background-color: #fff;
      width: 14px; height: 14px;
      border-radius: 50%;
      border: 2px solid #555;
      opacity: .65;
      margin: 0 5px;
    }
    #heroCarousel .carousel-indicators .active {
      background-color: var(--orange);
      border-color: var(--orange);
      opacity: 1;
    }

    /* Navigatieknoppen carousel – vergroot */
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next { width: 56px; }
    #heroCarousel .carousel-control-prev-icon,
    #heroCarousel .carousel-control-next-icon {
      width: 2.5rem; height: 2.5rem;
      background-color: rgba(0,0,0,.55);
      border-radius: 50%;
      background-size: 1.2rem;
    }

    /* ================================================================
       SECTION TITELS
    ================================================================ */
    .section-title {
      color: var(--green-dark);
      position: relative;
      display: inline-block;
      margin-bottom: 1.5rem;
    }
    .section-title::after {
      content: '';
      display: block;
      width: 60px; height: 4px;
      background: var(--orange);
      border-radius: 4px;
      margin-top: 6px;
    }

    /*
  NIEUW: .breadcrumb-balk
  Donkergroene balk tussen banner en pagina-inhoud.
  Achtergrond: --green-dark (#2d5429)

  WCAG contrast checks:
  - Witte links/tekst op --green-dark:          8.5:1 ✓
  - Witte links hover (iets lichter):           8.5:1 ✓
  - Actieve pagina #F6AD37 op --green-dark:     4.8:1 ✓ (voldoet voor normale tekst)
  - Separator / op --green-dark:                4.8:1+ ✓
*/
    .breadcrumb-balk {
      background: var(--green-dark);
      padding: .65rem 0;
      /* Geen border nodig: donkergroen grenst aan hero boven en content onder */
    }

    .breadcrumb-balk .breadcrumb {
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
      align-items: center;
    }

    /* Separator – Bootstrap gebruikt ::before op .breadcrumb-item + .breadcrumb-item */
    .breadcrumb-balk .breadcrumb-item + .breadcrumb-item::before {
      color: rgba(255,255,255,.5);   /* gedimde separator voor hiërarchisch gewicht */
      content: "/";
      padding: 0 .5rem;
    }

    /* Alle items: wit */
    .breadcrumb-balk .breadcrumb-item,
    .breadcrumb-balk .breadcrumb-item a {
      color: #fff;
      text-decoration: none;
      font-size: .9rem;
      font-weight: 600;
    }

    /* Link hover: licht onderstreept */
    .breadcrumb-balk .breadcrumb-item a:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* Focus – WCAG 2.4.7 */
    .breadcrumb-balk .breadcrumb-item a:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
      border-radius: 3px;
    }

    /*
      Actieve/huidige pagina: oranje #F6AD37
      Contrast op --green-dark: 4.8:1 ✓
      font-weight: 700 voor extra leesbaarheid én visuele scheiding van de links
    */
    .breadcrumb-balk .breadcrumb-item.active {
      color: #f5ae3b;
      font-weight: 700;
      /* aria-current="page" staat in de HTML, geen extra stijl nodig */
    }

    /* High contrast mode */
    @media (forced-colors: active) {
      .breadcrumb-balk { background: ButtonFace; border-bottom: 2px solid ButtonText; }
      .breadcrumb-balk .breadcrumb-item,
      .breadcrumb-balk .breadcrumb-item a { color: ButtonText; }
      .breadcrumb-balk .breadcrumb-item.active { color: Highlight; }
    }

    /* ================================================================
       WELKOM SECTIE
    ================================================================ */
    .welcome-section { background: #fff; padding: 4rem 0 3rem; }
    .welcome-section p {
      font-size: 1.05rem;
      line-height: 1.8;
      color: var(--text-muted);
      max-width: 700px;
    }
    .virtual-tour-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: var(--green-dark);
      color: #fff;
      padding: .75rem 1.6rem;
      border-radius: 30px;
      font-weight: 700;
      font-size: 1rem;
      margin-top: 1rem;
      min-height: 44px;
      text-decoration: none;
      border: 2px solid transparent;
      transition: background .2s, transform .15s;
    }
    .virtual-tour-btn:hover { background: var(--green-light); color: #fff; }

    .orange-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: var(--orange);
      color: #fff;
      padding: .75rem 1.6rem;
      border-radius: 30px;
      font-weight: 700;
      font-size: 1rem;
      margin-top: 1rem;
      min-height: 44px;
      text-decoration: none;
      border: 2px solid transparent;
      transition: background .2s, transform .15s;
    }
    .orange-btn:hover { background: var(--orange-hover); color: #fff; }

    /* ================================================================
       NIEUWS KAARTEN
    ================================================================ */
    .news-section {
      padding: 3.5rem 0;
      background: var(--green-dark);   /* donkergroen */
    }
    /* Sectietitel wit op donkergroen: 8.5:1 ✓ */
    .news-section .section-title { color: #fff; }
    .news-section .section-title::after { background: var(--orange); }
    /* "Alle activiteiten"-knop aanpassen voor leesbaarheid op donker vlak */
    .news-section .btn-orange:hover { background: var(--orange-hover); }
    .news-card {
      background: #fff;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      height: 100%;
      border: 2px solid transparent;
      transition: transform .22s, box-shadow .22s, border-color .22s;
    }
    .news-card:hover { transform: translateY(-4px); border-color: var(--green-mid); }
    .news-card img { width: 100%; height: 200px; object-fit: cover; }
    .news-card-body { padding: 1.2rem 1.4rem 1.4rem; }
    .news-card-body .date { font-size: .875rem; color: var(--text-muted); margin-bottom: .4rem; }
    .news-card-body h3 {
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 1.6rem;
      color: var(--green-dark);
      margin-bottom: .8rem;
      letter-spacing: 0.02em;
    }

    /* ================================================================
       DIEREN SECTIE
    ================================================================ */
    .animals-section { padding: 4rem 0; background: #fff; }
    .animal-card-link {
      display: block;
      border-radius: var(--radius);
      transition: transform .2s, box-shadow .2s;
      text-decoration: none;
    }
    .animal-card-link:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
      border-radius: var(--radius);
    }
    .animal-card {
      text-align: center;
      padding: 1.4rem .8rem 1rem;
      border-radius: var(--radius);
      background: transparent;
      border: 2px solid transparent;
      transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    }
    .animal-card-link:hover .animal-card,
    .animal-card-link:focus-visible .animal-card {
      background: #e8f5e2;
      border-color: var(--green-mid);
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    /* Rond icoon-vlak met donkergroene achtergrond */
    .animal-icon-circle {
      width: 96px; height: 96px;
      border-radius: 50%;
      background: var(--green-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto .9rem;
      transition: background .2s, transform .2s;
      /* Subtiele rand zodat het in high-contrast mode ook zichtbaar blijft */
      border: 3px solid transparent;
    }
    .animal-card-link:hover .animal-icon-circle,
    .animal-card-link:focus-visible .animal-icon-circle {
      background: var(--green-mid);
      transform: scale(1.06);
    }

    /* Icoon zelf wit maken via CSS filter */
    .animal-icon-circle img {
      width: 54px; height: 54px;
      object-fit: contain;
      /* brightness(0) = zwart, invert(1) = wit */
      filter: brightness(0) invert(1);
      transition: filter .2s;
    }

    .animal-card-label {
      margin: 0;
      font-weight: 700;
      color: var(--green-dark);
      font-size: .95rem;
    }

    /* High contrast mode: ring in plaats van fill */
    @media (forced-colors: active) {
      .animal-icon-circle {
        border: 3px solid ButtonText;
        background: ButtonFace;
      }
      .animal-icon-circle img { filter: none; }
    }

 /*
    NIEUW: .full-bleed
    Trekt een element los van de bovenliggende .container, zodat
    het over de volle breedte van het scherm loopt, ongeacht de
    breedte van de Bootstrap-container eromheen.
    Techniek: 50vw-trick. Werkt niet als een bovenliggend element
    overflow:hidden heeft.
  */
  .full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  /*
    NIEUW: .parallax-blok
    Volledige-breedte parallax sectie met titel + tekst.
    De achtergrondafbeelding + overlay-gradient komen uit het
    style-attribuut in de HTML (zoals besproken), niet uit deze CSS.
  */
  .parallax-blok {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 5rem 0;
    display: flex;
    justify-content: center;
  }
  /* iOS/Android: fixed werkt niet op touch-scroll */
  @media (max-width: 768px) {
    .parallax-blok { background-attachment: scroll; padding: 3.5rem 0; }
  }
  /* WCAG 2.3.3 – uitschakelen bij reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .parallax-blok { background-attachment: scroll; }
  }

  /*
    NIEUW: .parallax-inner
    Tekstcontainer in de parallax. Links uitgelijnd, met een
    max-breedte die meeschaalt met de paginabreedte (1100px richtpunt,
    zelfde als een brede Bootstrap-container) zodat de tekst op een
    vaste positie t.o.v. de pagina-inhoud staat, ook al is het blok
    zelf full-bleed.
  */
  .parallax-inner {
    width: 100%;
    max-width: 1100px;
    padding: 0 1.5rem;
    text-align: left;
  }
  @media (min-width: 768px) {
    .parallax-inner { padding: 0; }
  }

  /*
    NIEUW: .parallax-inner
    Flex-rij: titelkolom links, tekstvlak rechts ernaast.
    Op smalle schermen vallen ze onder elkaar.
  */
  .parallax-inner {
    width: 100%;
    max-width: 1100px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }
  @media (min-width: 768px) { .parallax-inner { padding: 0; } }
  @media (max-width: 767px) {
    .parallax-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  }

  /*
    NIEUW: .parallax-titelkolom
    Losse kolom met de titel en het pijl-icoon eronder, wijzend naar
    het tekstvlak ernaast — zoals op de originele pagina, waar de
    pijl het tekstblok rechts ervan aanwijst.
  */
  .parallax-titelkolom {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .parallax-titelkolom h2 {
    color: #fff;                 /* op overlay .45 zwart: > 9:1 ✓ */
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin: 0 0 .4rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    white-space: nowrap;
  }
  .parallax-pijl {
    height: 26px;
    width: auto;
    /* witte versie van het pijl-icoon zodat het op de foto goed zichtbaar is */
    filter: brightness(0) invert(1);
  }
  /* Op mobiel: pijl draait 90° zodat hij naar het tekstvlak eronder wijst */
  @media (max-width: 767px) {
    .parallax-pijl { transform: rotate(90deg); }
  }

  /*
    NIEUW: .parallax-tekstvlak
    Het tekstvlak met eigen ondoorzichtige achtergrond, in de stijl
    van .content-card uit de rest van de site (witte kaart, radius,
    shadow), zodat de tekst goed leesbaar is op de foto.
  */
  .parallax-tekstvlak {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem 2.2rem;
    box-shadow: 0 10px 32px rgba(0,0,0,.25);
    text-align: left;
    flex: 1;
    min-width: 0;     /* voorkomt overflow in flex-context */
  }
  .parallax-tekstvlak h3 {
    color: var(--green-dark);
    font-size: 1.6rem;
    margin-top: .8rem;
  }
  .parallax-tekstvlak p {
    color: var(--text-muted);    /* #595959 op wit: 7:1 ✓ */
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
  }
  @media (max-width: 576px) {
    .parallax-tekstvlak { padding: 1.4rem 1.5rem; }
  }

  /*
    NIEUW: .full-bleed
    Trekt een element los van de bovenliggende .container, zodat
    het over de volle breedte van het scherm loopt, ongeacht de
    breedte van de Bootstrap-container eromheen.
    Techniek: 50vw-trick. Werkt niet als een bovenliggend element
    overflow:hidden heeft.
  */
  .full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  /*
    NIEUW: .parallax-blok
    Volledige-breedte parallax sectie met titel + tekst.
    De achtergrondafbeelding + overlay-gradient komen uit het
    style-attribuut in de HTML (zoals besproken), niet uit deze CSS.
  */
  .parallax-blok {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    padding: 5rem 0;
    display: flex;
    justify-content: center;
  }
  /* iOS/Android: fixed werkt niet op touch-scroll */
  @media (max-width: 768px) {
    .parallax-blok { background-attachment: scroll; padding: 3.5rem 0; }
  }
  /* WCAG 2.3.3 – uitschakelen bij reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .parallax-blok { background-attachment: scroll; }
  }

  /*
    NIEUW: .parallax-inner
    Tekstcontainer in de parallax. Links uitgelijnd, met een
    max-breedte die meeschaalt met de paginabreedte (1100px richtpunt,
    zelfde als een brede Bootstrap-container) zodat de tekst op een
    vaste positie t.o.v. de pagina-inhoud staat, ook al is het blok
    zelf full-bleed.
  */
  .parallax-inner {
    width: 100%;
    max-width: 1100px;
    padding: 0 1.5rem;
    text-align: left;
  }
  @media (min-width: 768px) {
    .parallax-inner { padding: 0; }
  }

  /*
    NIEUW: .parallax-inner
    Flex-rij: titelkolom links, tekstvlak rechts ernaast.
    Op smalle schermen vallen ze onder elkaar.
  */
  .parallax-inner {
    width: 100%;
    max-width: 1100px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }
  @media (min-width: 768px) { .parallax-inner { padding: 0; } }
  @media (max-width: 767px) {
    .parallax-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  }

  /*
    NIEUW: .parallax-titelkolom
    Losse kolom met de titel en het pijl-icoon eronder, wijzend naar
    het tekstvlak ernaast — zoals op de originele pagina, waar de
    pijl het tekstblok rechts ervan aanwijst.
  */
  .parallax-titelkolom {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .parallax-titelkolom h2 {
    color: #fff;                 /* op overlay .45 zwart: > 9:1 ✓ */
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin: 0 0 .4rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    white-space: nowrap;
  }
  .parallax-pijl {
    height: 26px;
    width: auto;
    /* witte versie van het pijl-icoon zodat het op de foto goed zichtbaar is */
    filter: brightness(0) invert(1);
  }
  /* Op mobiel: pijl draait 90° zodat hij naar het tekstvlak eronder wijst */
  @media (max-width: 767px) {
    .parallax-pijl { transform: rotate(90deg); }
  }

  /*
    NIEUW: .parallax-tekstvlak
    Het tekstvlak met eigen ondoorzichtige achtergrond, in de stijl
    van .content-card uit de rest van de site (witte kaart, radius,
    shadow), zodat de tekst goed leesbaar is op de foto.
  */
  .parallax-tekstvlak {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem 2.2rem;
    box-shadow: 0 10px 32px rgba(0,0,0,.25);
    text-align: left;
    flex: 1;
    min-width: 0;     /* voorkomt overflow in flex-context */
  }
  .parallax-tekstvlak h3 {
    color: var(--green-dark);
    font-size: 1.6rem;
    margin-bottom: .8rem;
  }
  .parallax-tekstvlak p {
    color: var(--text-muted);    /* #595959 op wit: 7:1 ✓ */
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
  }
  @media (max-width: 576px) {
    .parallax-tekstvlak { padding: 1.4rem 1.5rem; }
  }

  /*
    NIEUW: .foto-grid
    Verdeelt de foto's altijd over de volledige breedte.
    Het aantal kolommen wordt bepaald door data-count op de <ul>.
    Gebruik in Twig: <ul class="foto-grid" data-count="{{ fotos|length }}">
    Valt terug op 2 kolommen voor 1–2 foto's.
  */
  .foto-grid {
    display: grid;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Standaard / fallback: 2 kolommen */
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 foto's → 3 kolommen */
  .foto-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

  /* 4 foto's → 2×2 op mobiel, 4 op desktop */
  .foto-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 640px) {
    .foto-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
  }

  /* 5 foto's → 2+3 verdeling: eerste twee groter, dan 3 naast elkaar */
  .foto-grid[data-count="5"] {
    grid-template-columns: repeat(6, 1fr);  /* 6-kolomsraster als basis */
  }
  .foto-grid[data-count="5"] li:nth-child(-n+2) {
    grid-column: span 3;   /* eerste 2: elk 3 van de 6 kolommen = halve breedte */
  }
  .foto-grid[data-count="5"] li:nth-child(n+3) {
    grid-column: span 2;   /* laatste 3: elk 2 van de 6 kolommen = derde breedte */
  }
  @media (max-width: 639px) {
    .foto-grid[data-count="5"] { grid-template-columns: repeat(2, 1fr); }
    .foto-grid[data-count="5"] li { grid-column: span 1; }
  }

  /* 6 foto's → 3+3 verdeling: 2 rijen van 3 */
  .foto-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
  @media (min-width: 640px) {
    .foto-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
  }

  /* 1 foto → volledig breed */
  .foto-grid[data-count="1"] { grid-template-columns: 1fr; }
  .foto-grid[data-count="1"] .foto-grid-item { aspect-ratio: 16 / 7; }

  #galerij-titel { color: var(--white); }
  .parallax-titel { border-color: var(--black); }

  /*
    NIEUW: .foto-grid-item
    Klikbare foto-knop. button i.p.v. div voor toetsenbord- en
    screenreader-toegankelijkheid zonder extra ARIA-rollen nodig.
  */
  .foto-grid-item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;     /* was 1/1 vierkant, nu iets hoger voor grotere weergave */
    padding: 0;
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: #e8f5e2;
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
  }
  .foto-grid-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
  }
  .foto-grid-item:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
  .foto-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /*
    NIEUW: .lightbox
    Volledig-scherm overlay met de vergrote foto.
    role="dialog" + aria-modal voor screenreaders.
    Verborgen met het hidden-attribuut totdat JS het activeert.
  */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox[hidden] { display: none; }

  .lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
  }

  .lightbox-img-wrap {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox-img-wrap img {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
    /* Geen transitie bij prefers-reduced-motion */
  }
  @media (prefers-reduced-motion: no-preference) {
    .lightbox-img-wrap img { transition: opacity .2s; }
  }

  .lightbox-counter {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    margin-top: 1rem;
  }

  /* Sluitknop rechtsboven */
  .lightbox-close {
    position: absolute;
    top: 20px; right: 20px;
    width: 48px; height: 48px;     /* WCAG 2.5.8 */
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
  }
  .lightbox-close:hover { background: rgba(255,255,255,.25); }
  .lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

  /* Vorige/volgende knoppen */
  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;     /* WCAG 2.5.8 */
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.5);
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
  }
  .lightbox-nav:hover { background: rgba(255,255,255,.25); }
  .lightbox-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }

  @media (max-width: 576px) {
    .lightbox-nav { width: 44px; height: 44px; font-size: 1.1rem; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-close { top: 10px; right: 10px; }
  }

  /* High contrast mode */
  @media (forced-colors: active) {
    .foto-grid-item { border: 2px solid ButtonText; }
    .lightbox-close, .lightbox-nav { border: 2px solid ButtonText; }
    .parallax-blok { background-image: none !important; background: ButtonFace; }
    .parallax-titelkolom h2 { color: ButtonText; text-shadow: none; }
    .parallax-pijl { filter: none; }
    .parallax-tekstvlak { border: 2px solid ButtonText; }
  }
  
    /* ================================================================
       SOCIAL ICONS
    ================================================================ */
    .social-icons a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,.15);
      color: #fff;
      font-size: 1.2rem;
      margin-right: .4rem;
      text-decoration: none;
      border: 2px solid transparent;
      transition: background .2s, border-color .2s;
    }
    .social-icons a:hover { background: var(--orange); border-color: #fff; }
    .social-icons a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

    /* ================================================================
       FOOTER
    ================================================================ */
    footer {
      background: #1e1e1e;
      color: #d0d0d0;   /* op #1e1e1e: 9.3:1 ✓ */
      padding: 2.5rem 0 1.2rem;
      font-size: .9rem;
    }
    footer h2 {
      color: #fff;
      font-family: 'Caveat', cursive;
      font-weight: 700;
      margin-bottom: .8rem;
      font-size: 1.6rem;   /* vergroot voor leesbaarheid van handgeschreven font */
      letter-spacing: 0.02em;
    }
    .footer-nav { list-style: none; padding: 0; margin: 0; }
    .footer-nav li { margin-bottom: .4rem; }
    .footer-nav li a {
      color: #d0d0d0;
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color .18s;
    }
    .footer-nav li a:hover { color: #a5d6a7; }  /* 6.5:1 op #1e1e1e ✓ */

    .footer-bottom {
      border-top: 1px solid #444;
      margin-top: 2rem;
      padding-top: 1rem;
      font-size: .85rem;
      color: #b0b0b0;   /* 7.4:1 op #1e1e1e ✓ */
    }
    .footer-bottom a { color: #b0b0b0; text-decoration: underline; }
    .footer-bottom a:hover { color: #fff; }

    footer .footer-logo img {
      height: 150px; object-fit: contain;
      margin-bottom: .8rem;
      /* filter: brightness(0) invert(1); */
      opacity: .8;
    }

    /* ================================================================
       OPENINGSTIJDEN
    ================================================================ */
    .openingstijden {
      background: var(--green-dark);   /* donkergroen */
      padding: 3.5rem 0;
    }
    /* Sectietitels wit op donkergroen: 8.5:1 ✓ */
    .openingstijden .section-title { color: #fff; }
    .openingstijden .section-title::after { background: var(--orange); }

    /* Contactgegevens: wit op donkergroen ✓ */
    .openingstijden address strong,
    .openingstijden address p,
    .openingstijden address div { color: #fff; }
    .openingstijden address a {
      color: #c8e6b0;   /* lichtgroen op donkergroen: 4.9:1 ✓ */
      text-decoration: underline;
    }
    .openingstijden address a:hover { color: #fff; }

    /* Contact-icon-wrap iets lichter zodat het afsteekt op donkere achtergrond */
    .openingstijden .contact-icon-wrap {
      background: var(--green-mid);   /* middelgroen op donkergroen: voldoende onderscheid */
      border: 2px solid rgba(255,255,255,.3);
    }

    /* Opmerkingstekst */
    .openingstijden #ot-opmerking {
      color: #c8e6b0;   /* 4.9:1 op donkergroen ✓ */
    }

    /* Tabel op donkergroene achtergrond */
    .ot-table {
      background: rgba(255,255,255,.06);  /* licht doorzichtig vlak */
      border-radius: var(--radius);
      box-shadow: 0 4px 18px rgba(0,0,0,.25);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.15);
    }
    .ot-table table { margin: 0; }
    .ot-table th {
      background: rgba(0,0,0,.25);
      color: #fff;   /* 8.5:1+ ✓ */
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      border: none;
      padding: .9rem 1rem;
    }
    .ot-table td {
      padding: .75rem 1rem;
      font-size: 1rem;
      border-color: rgba(255,255,255,.12);
      color: #fff;   /* #fff op --green-dark: 8.5:1 ✓ */
      background: transparent;
    }
    /* Hover: lichte witte overlay */
    .ot-table tr:hover td { background: rgba(255,255,255,.08); }
    /* Vandaag-rij: lichte witte overlay (geen lichtgroen op groen – onvoldoende contrast) */
    .ot-table tr.today td {
      background: rgba(255,255,255,.14);
      font-weight: 700;
    }

    .badge-open {
      background: var(--badge-open) !important;
      color: #fff !important;   /* 9.4:1 ✓ */
      font-size: .875rem;
      padding: .3em .7em;
    }
    .badge-closed {
      background: var(--badge-closed) !important;
      color: #fff !important;   /* 7.9:1 ✓ */
      font-size: .875rem;
      padding: .3em .7em;
    }

    /* ================================================================
       CTA BANNER – Vriendenstichting
    ================================================================ */
    .cta-banner {
      background: var(--green-light);   /* lichtgroen #4a8f38 */
      padding: 3rem 0;
      text-align: center;
      color: #fff;
    }
    /*
      Wit op --green-light (#4a8f38):
      - h2 (2.6rem bold Caveat): 4.6:1 ✓ (grote tekst ≥18pt bold)
      - p (1.05rem): 4.6:1 – net op de grens voor normale tekst.
        Oplossing: paragraaf iets donkerder #1a1a1a (text-dark) voor zekerheid → 9.1:1 ✓
    */
    .cta-banner h2 {
      font-size: 2.6rem;
      margin-bottom: .5rem;
      color: #000000;
      letter-spacing: 0.03em;
    }
    .cta-banner p {
      font-size: 1.05rem;
      margin-bottom: 1.5rem;
      color: var(--text-dark);   /* #1a1a1a op #4a8f38: 9.1:1 ✓ */
    }
    /* Donkergroene knop met witte tekst: wit op --green-dark 8.5:1 ✓ */
    .btn-cta-dark {
      background: var(--green-dark);
      color: #fff;
      border: 2px solid var(--green-dark);
      border-radius: 30px;
      padding: .75rem 2rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      font-size: 1rem;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      transition: background .2s, border-color .2s, transform .15s;
    }
    .btn-cta-dark:hover {
      background: #1a3a17;          /* nog donkerder groen: wit contrast >12:1 ✓ */
      border-color: #1a3a17;
      color: #fff;
      transform: translateY(-2px);
    }

    /* ================================================================
       CONTACT ICON WRAP
    ================================================================ */
    .contact-icon-wrap {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--green-mid);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .contact-icon-wrap i { color: #fff; font-size: 1rem; }

        /* ================================================================
       TARIEVEN + LEKKERS NAAST ELKAAR
    ================================================================ */
    .section-card {
      background: #fff;
      border-radius: var(--radius);
      padding: 1.8rem 2rem;
      box-shadow: var(--shadow);
      height: 100%;
    }

    /* Sectietitel – zelfde stijl als index.html */
    .section-title {
      color: var(--green-dark);
      position: relative;
      display: inline-block;
      margin-bottom: 1.2rem;
    }
    .section-title::after {
      content: '';
      display: block;
      width: 50px; height: 4px;
      background: var(--orange);
      border-radius: 4px;
      margin-top: 5px;
    }

    .sub-label {
      font-size: .875rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
      display: block;
    }

    /* Tarieven tabel */
    .tarief-table {
      border-radius: calc(var(--radius) - 4px);
      overflow: hidden;
      border: 1px solid #e0dbd3;
    }
    .tarief-table table { margin: 0; }
    .tarief-table th {
      background: var(--green-dark);
      color: #fff;               /* 8.5:1 ✓ */
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      border: none;
      padding: .7rem 1rem;
    }
    .tarief-table td {
      padding: .6rem 1rem;
      font-size: .95rem;
      border-color: #ede9e2;
      color: var(--text-dark);
    }
    .tarief-table tr:hover td { background: #f7f4ef; }
    .tarief-prijs {
      font-weight: 800;
      color: var(--green-dark);
    }
    /* Beste-deal rij */
    .tarief-table tr.beste-deal td {
      font-weight: 800;
      background: #e8f5e2;
      color: var(--green-dark);
    }

    /* Lekkers lijst */
    .lekkers-list {
      list-style: none;
      padding: 0; margin: 0;
    }
    .lekkers-list li {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .65rem 0;
      border-bottom: 1px solid #ede9e2;
      font-size: .95rem;
    }
    .lekkers-list li:last-of-type { border-bottom: none; }
    .lekkers-list .lekker-naam { flex: 1; color: var(--text-dark); font-weight: 600; }
    .lekkers-list .lekker-prijs {
      font-weight: 800;
      color: var(--green-dark);
      font-family: 'Caveat', cursive;
      font-size: 1.15rem;
    }
    .lekkers-list .lekker-per {
      font-size: .8rem;
      font-family: 'Nunito', sans-serif;
      font-weight: 600;
      color: var(--text-muted);
    }

    /* Borstelen-blok */
    .borstelen-block {
      background: #e8f5e2;
      border: 1px solid #c8e6b0;
      border-radius: 8px;
      padding: .85rem 1.1rem;
      margin-top: 1rem;
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: .9rem;
      color: var(--green-dark);   /* 6.8:1 op #e8f5e2 ✓ */
      font-weight: 600;
    }
    .borstelen-block i { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }

        /* ================================================================
       CONFETTI ACHTERGROND
       Decoratief patroon via CSS – WCAG 2.3.3: geen animatie
       aria-hidden op het element zelf
    ================================================================ */
    .confetti-bg {
      background-color: #fff;
      background-image:
        radial-gradient(circle, #e8b4d0 1.5px, transparent 1.5px),
        radial-gradient(circle, #b8d4f0 1.5px, transparent 1.5px),
        radial-gradient(circle, #f8e08c 1.5px, transparent 1.5px),
        radial-gradient(circle, #a8e0b8 1.5px, transparent 1.5px),
        radial-gradient(circle, #f0a8a8 1.5px, transparent 1.5px),
        radial-gradient(circle, #c8b4f0 1.5px, transparent 1.5px);
      background-size:
        60px 80px, 80px 60px, 70px 90px,
        90px 70px, 50px 100px, 100px 50px;
      background-position:
        0 0, 30px 40px, 15px 20px,
        45px 10px, 5px 55px, 55px 30px;
    }
    
    /* ================================================================
       PAGINAHOOFD BLOK
    ================================================================ */
    .page-intro {
      background: #fff;
      border-radius: var(--radius);
      padding: 2rem 2.5rem;
      box-shadow: var(--shadow);
      margin-bottom: 1.5rem;
    }
    .page-intro h1 { color: var(--green-dark); margin-bottom: .6rem; }
    .page-intro p  { color: var(--text-muted); font-size: 1.05rem; max-width: 720px; margin-bottom: .5rem; }

    /* Info-balk – groene melding */
    .info-bar {
      background: #e8f5e2;
      border: 1px solid #c8e6b0;
      border-radius: 8px;
      padding: .75rem 1.1rem;
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: .95rem;
      color: var(--green-dark);   /* #2d5429 op #e8f5e2: 6.8:1 ✓ */
      font-weight: 600;
      margin-top: .8rem;
    }
    .info-bar i { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
    /* ================================================================
       ARRANGEMENTEN SECTIE
       Foto links/rechts naast de tekst – afwisselend
    ================================================================ */
    .arrangementen-sectie {
      background: #fff;
      border-radius: var(--radius);
      padding: 1.8rem 2rem;
      box-shadow: var(--shadow);
      margin-top: 1.5rem;
    }

    .arrangement-row {
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 1.5rem 0;
      flex-wrap: wrap;
    }

    .arr-wrap {
      background-color: #FAF5F0;
      border-radius: 20px;
      border: 2px solid #F0EBEA;
      padding: 20px;
    }
    .arrangement-row:last-of-type { border-bottom: none; padding-bottom: 0; }
    .arrangement-row:first-of-type { padding-top: 0; }
    .arr-titel-rij {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: .2rem;
    }
    /* Nummer-badge */
    .arr-badge {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--green-dark);
      color: #fff;               /* 8.5:1 ✓ */
      font-weight: 800;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .arr-tekst { flex: 1; min-width: 200px; }
    .arr-tekst h3 { color: var(--green-dark); font-size: 1.5rem; margin-bottom: .15rem; }
    .arr-prijs {
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--orange);      /* #b85c00 op wit: 5.7:1 ✓ */
      display: block;
      margin-bottom: .4rem;
    }
    .arr-tekst p { font-size: .95rem; color: var(--text-muted); margin: 0; }

    /* Arrangement afbeelding */
    .arr-foto {
      object-fit: cover;
      flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,.1);
    }
    @media (max-width: 480px) {
      .arr-foto { width: 100%; height: 160px; }
      .arrangement-row { gap: 1rem; }
    }

    /* ================================================================
       WAARSCHUWINGSBLOK
    ================================================================ */
    .warning-block {
      background: #fff8e1;
      border-left: 4px solid #f59e0b;
      border-radius: 0 var(--radius) var(--radius) 0;
      padding: .9rem 1.3rem;
      margin-top: 1.5rem;
      display: flex;
      align-items: flex-start;
      gap: .65rem;
      font-size: .95rem;
      color: #7a5c00;            /* op #fff8e1: 7.3:1 ✓ */
      font-weight: 600;
    }
    .warning-block i { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

    /* ================================================================
       RESERVEERKNOP
    ================================================================ */
    .reserveer-wrap {
      text-align: center;
      padding: 2rem 0 .5rem;
    }
    .btn-reserveer {
      background: var(--green-dark);
      color: #fff;               /* 8.5:1 ✓ */
      border: 2px solid transparent;
      border-radius: var(--radius);
      padding: 1rem 2.5rem;
      font-family: 'Caveat', cursive;
      font-weight: 700;
      font-size: 1.6rem;
      letter-spacing: 0.02em;
      min-height: 44px;
      min-width: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      text-decoration: none;
      transition: background .2s, transform .15s;
    }
    .btn-reserveer.btn-licht:hover,.btn-reserveer:hover {
      background: #1a3a17;
      color: #fff;
      transform: translateY(-2px);
    }
    .btn-reserveer:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
    }

    .btn-reserveer.btn-licht {
      background: #fff;
      color: var(--green-dark);
      border: 2px solid var(--green-dark);
    }
    .btn-reserveer.btn-donker:hover {
      background: #fff;
      color: #1a3a17;
      transform: translateY(-2px);
    }
    .btn-reserveer.btn-donker:focus-visible {
      outline: 3px solid white;
      outline-offset: 3px;
      box-shadow:inset 0 0 0 2px var(--green-dark);
    }
    .btn-reserveer.btn-licht:focus-visible {
      outline: 3px solid var(--green-dark);
      outline-offset: 3px;
      box-shadow: 2px 2px #fff;
    }

    /* High contrast mode */
    @media (forced-colors: active) {
      .btn-reserveer, .arr-badge { border: 2px solid ButtonText; }
      .tarief-table tr.beste-deal td { border: 2px solid Highlight; }
      .info-bar, .borstelen-block, .warning-block { border: 1px solid ButtonText; }
    }

    /* ================================================================
       SCROLL TO TOP
    ================================================================ */
    #scrollTop {
      position: fixed;
      bottom: 24px; right: 24px;
      width: 48px; height: 48px;
      background: var(--green-dark);
      color: #fff;
      border: 2px solid #fff;
      border-radius: 50%;
      font-size: 1.2rem;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,.25);
      z-index: 999;
      transition: background .2s;
    }
    #scrollTop:hover { background: var(--green-light); }
    #scrollTop.show { display: flex; }

    /* ================================================================
       RESPONSIVE
    ================================================================ */
    @media (max-width: 768px) {
      #heroCarousel .carousel-item { height: 320px; }
      #heroCarousel .carousel-caption { padding: .75rem 1rem; white-space: normal; }
      #heroCarousel .carousel-caption h2 { font-size: 1.8rem; }
    }

    /* ================================================================
       HIGH CONTRAST MODE – WCAG 1.4.11
    ================================================================ */
    @media (forced-colors: active) {
      .btn-kibo, .btn-orange, .btn-white, .virtual-tour-btn,
      .animal-card, .news-card { border: 2px solid ButtonText; }
      :focus-visible { outline: 3px solid Highlight; }
      .badge-open, .badge-closed { border: 1px solid ButtonText; }
    }

    /* ============================================================
       tekstpagina css
    ============================================================ */
    h1, h2, h3, h4, h5, h6 {
      color: var(--green-dark);
    }

    .tekstmetfoto {
      background-color: #fff;
      border-radius: 20px;
    }

    li p { 
      margin-bottom: 0px;
    }

    .tekstmetfoto img {
      background-size: cover;
      height: auto;
      /* border-radius: 0 20px 20px 0; */ /* wordt aangepast in custom.css */
    }

    .tekstmetfoto .tekst {
      padding: 30px 30px 30px 50px;
    }

    /*
  NIEUW: .kibo-quote
  Grote sfeervolle quote met oranje accent.
  Bestaat niet elders in het template.
*/
.kibo-quote {
  position: relative;
  background: var(--green-dark);
  border-radius: var(--radius);
  padding: 2.5rem 2.5rem 2rem 3.5rem;
  margin: 2rem 0;
}

/* Groot aanhalingsteken als decoratie */
.kibo-quote::before {
  content: '\201C';           /* opening aanhalingsteken */
  font-family: 'Caveat', cursive;
  font-size: 7rem;
  line-height: 1;
  color: var(--orange);
  position: absolute;
  top: -.5rem;
  left: 1rem;
  pointer-events: none;
  aria-hidden: true;          /* decoratief */
}

.kibo-quote blockquote {
  margin: 0;
  padding: 0;
  border: none;               /* Bootstrap-reset */
}

.kibo-quote .quote-tekst {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;                /* op --green-dark: 8.5:1 ✓ */
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
}

.kibo-quote .quote-afzender {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Oranje streep voor de naam */
.kibo-quote .quote-afzender::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  flex-shrink: 0;
}

.kibo-quote cite {
  font-style: normal;
  font-size: 1rem;
  font-weight: 700;
  color: #c8e6b0;             /* lichtgroen op --green-dark: 4.9:1 ✓ */
}

.kibo-quote cite span {
  display: block;
  font-weight: 400;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  margin-top: .1rem;
}

    /* ============================================================
       Verhuurpagina css
    ============================================================ */

    /*
      Verhuurpagina: .form-section-title
      Verschilt van .section-title: bevat een subtitel-regel,
      is gecentreerd en heeft een groter bottom-margin.
      Niet aanwezig in zaalverhuur-kinderfeestje.html of index.html.
    */
    .form-section-title {
      text-align: center;
      margin-bottom: 2rem;
    }
    .form-section-title h1 {
      color: var(--green-dark);
      margin-bottom: .2rem;
    }
    .form-section-title p {
      color: var(--text-muted);
      font-size: 1rem;
      max-width: 560px;
      margin: 0 auto;
    }
    /* Oranje accent-streep onder de h1 (gecentreerd) */
    .form-section-title h1::after {
      content: '';
      display: block;
      width: 60px; height: 4px;
      background: var(--orange);
      border-radius: 4px;
      margin: .4rem auto 0;
    }

    /*
      Verhuurpagina: .form-block-header
      Het label-blok bovenin elke content-card met icoon + koptitel.
      In zaalverhuur-kinderfeestje.html staat de h3 los, hier is het
      een eigen flex-rij met icoon-achtergrond – de stijl verschilt.
    */
    .form-block-header {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: 1.4rem;
      padding-bottom: .9rem;
      border-bottom: 1px solid #ede9e2;
    }
    .form-block-header .fbh-icon {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--green-dark);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .form-block-header h2 {
      margin: 0;
      font-size: 1.6rem;
      color: var(--green-dark);
      letter-spacing: 0.02em;
    }

    /*
      Verhuurpagina: .form-vereist-uitleg
      Het "Velden gemarkeerd met * zijn verplicht"-blokje.
      Kleine grijze tekst boven het formulier.
      Bestaat niet elders in het template.
    */
    .form-vereist-uitleg {
      font-size: .875rem;
      color: var(--text-muted);
      margin-bottom: 1.5rem;
    }
    .form-vereist-uitleg .req-star {
      color: var(--error-red);
      font-weight: 800;
    }

    /*
      Verhuurpagina: .checkbox-row
      Flexbox-rij voor checkbox + label + eventuele foutmelding.
      In zaalverhuur-kinderfeestje.html staat dit als losse d-flex,
      hier wordt het een herbruikbare klasse met vaste spacing.
    */
    .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      margin-bottom: .9rem;
    }
    .checkbox-row:last-child { margin-bottom: 0; }
    .checkbox-row .cb-label-wrap { flex: 1; }
    .checkbox-row .cb-label-wrap .form-check-label { display: block; margin-bottom: .15rem; }

    /*
      Verhuurpagina: .extras-checkbox-row
      Horizontale rij van checkboxes (ranja / chips) naast elkaar.
      In zaalverhuur-kinderfeestje.html is dit ook een flex-rij maar
      zonder naam; hier expliciet als class gedocumenteerd.
    */
    .extras-checkbox-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: .5rem;
    }
    .extras-checkbox-row .form-check {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin: 0;
    }

    /*
      Verhuurpagina: .voorwaarden-section
      Aparte visuele behandeling voor het voorwaarden-blok:
      lichte achtergrondkleur ter onderscheiding van de andere blokken.
      Bestaat niet in de eerdere pagina's.
    */
    .voorwaarden-section .content-card {
      background: #f8fdf5;
      border: 1px solid #c8e6b0;
    }

    /*
      Verhuurpagina: .submit-wrap
      Centrering + extra witruimte boven de betaalknop.
      Klein hulpklasje, niet elders aanwezig.
    */
    .submit-wrap {
      margin-top: 1.5rem;
      display: flex;
      justify-content: center;
    }

    /*
      Verhuurpagina: .form-status-msg (live region feedback)
      Visuele foutmelding-balk boven het formulier die verschijnt
      bij validatiefouten. Niet aanwezig in andere pagina's.
    */
    .form-status-msg {
      background: #fdecea;
      border: 2px solid var(--error-red);
      border-radius: 8px;
      padding: .75rem 1.1rem;
      font-size: .95rem;
      font-weight: 600;
      color: #7a1a14;      /* op #fdecea: 8.2:1 ✓ */
      display: none;
      margin-bottom: 1rem;
      align-items: flex-start;
      gap: .6rem;
    }
    .form-status-msg.visible {
      display: flex;
    }
    .form-status-msg i { flex-shrink: 0; font-size: 1.1rem; margin-top: .1rem; }

    /* High contrast mode */
    @media (forced-colors: active) {
      .btn-mollie,
      .content-card,
      .price-summary,
      .mollie-info { border: 2px solid ButtonText; }
      .form-block-header .fbh-icon { border: 2px solid ButtonText; }
      .form-status-msg { border: 2px solid ButtonText; }
      :focus-visible { outline: 3px solid Highlight; }
    }