@charset "UTF-8";

/* =========================================================
   Puer leven in stijl — huisstijllaag bovenop Cassiopeia
   ---------------------------------------------------------
   Kleuren en letters komen één-op-één van de oude live site
   (puerleveninstijl.nl). De indeling is hetzelfde gebleven —
   rode balk met logo en menu, grote fototegels, rode voet —
   maar dan met meer lucht, zachtere vormen en nette hover-
   overgangen.
   ========================================================= */

/* ---------------------------------------------------------
   1. Ontwerptokens
   --------------------------------------------------------- */

:root {
  /* Merkkleuren — uit de productie-CSS van de oude site gehaald */
  --puer-red: #c22d3d;
  --puer-red-dark: #992330;
  --puer-red-tint: #fbf1f2;
  --puer-green: #c0cc4d;
  --puer-green-dark: #a4ae33;
  /* Als tekst op wit haalt het huisgroen geen leesbaar contrast; deze
     donkerdere variant wel (>= 4,5:1). Alleen voor letters gebruiken. */
  --puer-green-ink: #66701a;
  --puer-green-tint: #f7f9ea;

  /* Neutralen */
  --puer-ink: #343434;
  --puer-ink-soft: #6a6a6a;
  --puer-muted: #9a9a9a;
  --puer-rule: #e7e7e7;
  --puer-paper: #ffffff;
  --puer-paper-soft: #faf9f7;
  --puer-paper-deep: #f3f1ee;

  /* Letters */
  --puer-font-display: 'ft4', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --puer-font-body: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Maatvoering */
  --puer-shell: 1200px;
  --puer-shell-narrow: 820px;
  --puer-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --puer-section: clamp(3rem, 7vw, 5.5rem);
  --puer-radius: 16px;
  --puer-radius-sm: 10px;
  --puer-radius-pill: 999px;

  /* Schaduwen — subtiel, nooit zwaar */
  --puer-shadow-sm: 0 2px 8px rgba(52, 52, 52, .06);
  --puer-shadow: 0 10px 30px rgba(52, 52, 52, .10);
  --puer-shadow-lg: 0 22px 55px rgba(52, 52, 52, .16);

  --puer-ease: cubic-bezier(.22, .61, .36, 1);

  /* Cassiopeia meesturen zodat kerncomponenten vanzelf meelopen */
  --cassiopeia-font-family-body: var(--puer-font-body);
  --cassiopeia-font-family-headings: var(--puer-font-display);
  --cassiopeia-color-primary: var(--puer-red);
  --body-color: var(--puer-ink);
  --body-bg: var(--puer-paper);
  --link-color: var(--puer-red);
  --link-hover-color: var(--puer-red-dark);
  --template-bg-light: var(--puer-paper-soft);
}

/* ---------------------------------------------------------
   2. Basis
   --------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* Zorgt dat ankers niet onder de meelopende balk verdwijnen */
  scroll-padding-top: 96px;
}

body.puer-site {
  font-family: var(--puer-font-body);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.7;
  color: var(--puer-ink);
  background: var(--puer-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.puer-site h1, .puer-site h2, .puer-site h3,
.puer-site h4, .puer-site h5, .puer-site h6 {
  font-family: var(--puer-font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--puer-ink);
  letter-spacing: -.005em;
  margin: 0 0 .6em;
}

/* De oude site zette de paginakop in Puer-rood — dat houden we aan. */
.puer-site h1,
.puer-site .puer-display { color: var(--puer-red); }

.puer-site h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
.puer-site h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.3rem); }
.puer-site h3 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); }
.puer-site h4 { font-size: 1.2rem; }

.puer-site p { margin: 0 0 1.1em; }
.puer-site p:last-child { margin-bottom: 0; }

.puer-site a {
  color: var(--puer-red);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .18s var(--puer-ease);
}
.puer-site a:hover, .puer-site a:focus { color: var(--puer-red-dark); }

.puer-site ::selection { background: var(--puer-red); color: #fff; }

.puer-site :focus-visible {
  outline: 3px solid var(--puer-green);
  outline-offset: 2px;
  border-radius: 3px;
}

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

.puer-site hr {
  border: 0;
  border-top: 1px solid var(--puer-rule);
  margin: 2.5rem 0;
  opacity: 1;
}

.puer-site .puer-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--puer-red);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--puer-radius-sm) 0;
}
.puer-site .puer-skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------
   3. Rasters
   --------------------------------------------------------- */

.puer-shell {
  width: 100%;
  max-width: var(--puer-shell);
  margin-inline: auto;
  padding-inline: var(--puer-gutter);
}

.puer-shell--narrow { max-width: var(--puer-shell-narrow); }

.puer-main { padding-block: var(--puer-section); }
.puer-home .puer-main:not(:has(main :is(h1, h2, p, div, img))) { padding-block: 0; }

.puer-main__grid { display: block; }

.puer-site.has-sidebar .puer-main__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .puer-site.has-sidebar .puer-main__grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .puer-sidebar--left { order: -1; }
  .puer-site.has-sidebar:has(.puer-sidebar--left) .puer-main__grid { grid-template-columns: 20rem minmax(0, 1fr); }
}

.puer-strip > * { margin: 0; }

/* ---------------------------------------------------------
   4. Kopbalk
   --------------------------------------------------------- */

.puer-header {
  background: var(--puer-red);
  color: #fff;
  z-index: 60;
  /* Dun wit lijntje met een zachte schaduw eronder: zet de balk los van de
     foto die eronder doorloopt, zonder een harde rand te trekken. */
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 4px 12px rgba(26, 12, 14, .22);
}

.puer-header.is-sticky {
  position: sticky;
  top: 0;
}

/* Krijgt via JS iets meer diepte zodra je scrolt */
.puer-header.is-scrolled { box-shadow: 0 8px 26px rgba(26, 12, 14, .3); }

.puer-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 84px;
  padding-block: .5rem;
}

.puer-site .puer-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
}
.puer-site .puer-brand:hover, .puer-site .puer-brand:focus { color: #fff; }

/* Let op: .puer-site img zet height:auto en is even specifiek, dus hier
   bewust een selector met één klasse extra zodat de hoogte wint. */
.puer-site .puer-brand__mark {
  width: auto;
  height: 52px;
  display: block;
  transition: transform .3s var(--puer-ease);
}
.puer-brand:hover .puer-brand__mark { transform: scale(1.06); }

.puer-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--puer-font-display);
}
.puer-brand__name { font-size: 1.7rem; letter-spacing: .01em; }
.puer-brand__tag {
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, .8);
  margin-top: .18rem;
}

@media (max-width: 420px) {
  .puer-brand__text { display: none; }
}

/* Menu -------------------------------------------------- */

.puer-nav { margin-inline-start: auto; }

.puer-nav ul.mod-menu,
.puer-nav ul.nav {
  display: flex;
  /* Cassiopeia zet .mod-menu op flex-direction: column — hier expliciet terug op een rij. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.4rem, 1.4vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.puer-nav ul.mod-menu li { position: relative; }

.puer-nav ul.mod-menu > li > a,
.puer-nav ul.mod-menu > li > span.mod-menu__separator {
  display: block;
  font-family: var(--puer-font-display);
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  padding: .55rem .2rem;
  position: relative;
  white-space: nowrap;
  transition: color .18s var(--puer-ease);
}

.puer-nav ul.mod-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .18rem;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--puer-ease);
}

.puer-nav ul.mod-menu > li > a:hover,
.puer-nav ul.mod-menu > li > a:focus,
.puer-nav ul.mod-menu > li.current > a,
.puer-nav ul.mod-menu > li.active > a { color: #fff; }

.puer-nav ul.mod-menu > li > a:hover::after,
.puer-nav ul.mod-menu > li > a:focus::after,
.puer-nav ul.mod-menu > li.current > a::after,
.puer-nav ul.mod-menu > li.active > a::after { transform: scaleX(1); }

/* Uitklapmenu's */

/* Cassiopeia's eigen toggle-knopje voor submenu's: overbodig in dit ontwerp
   — desktop klapt uit via :hover, mobiel toont het submenu altijd al open.
   Ongestyled bleef de knop op de standaard browser-knopopmaak vallen, wat
   het bovenliggende menu-item (bv. "Dagbesteding") net iets hoger duwde
   dan de rest van de balk. */
.puer-nav .mod-menu__toggle-sub { display: none; }

.puer-nav ul.mod-menu ul {
  /* mod_menu's eigen CSS verbergt [aria-hidden="true"] met display:none via
     een :where()-selector (specificiteit 0) — omdat dat de knop nodig heeft
     die we hierboven verbergen, overschrijven we 'm hier expliciet. Zichtbaar
     blijft geregeld via opacity/visibility hieronder. */
  display: block;
  position: absolute;
  top: 100%;
  left: -.9rem;
  min-width: 14rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border-radius: var(--puer-radius-sm);
  box-shadow: var(--puer-shadow);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s var(--puer-ease), transform .2s var(--puer-ease), visibility .2s;
}

.puer-nav ul.mod-menu li:hover > ul,
.puer-nav ul.mod-menu li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.puer-nav ul.mod-menu ul a {
  display: block;
  padding: .5rem .75rem;
  border-radius: 6px;
  color: var(--puer-ink);
  text-decoration: none;
  font-family: var(--puer-font-display);
}
.puer-nav ul.mod-menu ul a:hover,
.puer-nav ul.mod-menu ul a:focus { background: var(--puer-red-tint); color: var(--puer-red); }

/* Knop-item in het menu: vul bij het menu-item onder "Linktype" het veld
   "CSS-stijl voor link" met menu-cta. */
.puer-site .puer-nav ul.mod-menu > li > a.menu-cta {
  background: #fff;
  color: var(--puer-red);
  border-radius: var(--puer-radius-pill);
  padding: .5rem 1.15rem;
}
.puer-nav ul.mod-menu > li > a.menu-cta::after { display: none; }
.puer-site .puer-nav ul.mod-menu > li > a.menu-cta:hover { background: var(--puer-green); color: #fff; }

/* Icoonknoppen --------------------------------------------- */

.puer-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

.puer-site .puer-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  transition: background-color .2s var(--puer-ease), color .2s var(--puer-ease),
              border-color .2s var(--puer-ease), transform .2s var(--puer-ease);
}
.puer-site .puer-iconbtn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  display: block;
}

.puer-site .puer-iconbtn:hover, .puer-site .puer-iconbtn:focus {
  background: #fff;
  color: var(--puer-red);
  border-color: #fff;
  transform: translateY(-2px);
}
.puer-site .puer-iconbtn--wa:hover, .puer-site .puer-iconbtn--wa:focus { background: #25d366; color: #fff; border-color: #25d366; }

@media (max-width: 575px) {
  .puer-iconbtn:not(:first-of-type) { display: none; }
}

/* Hamburger ------------------------------------------------ */

.puer-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.puer-burger span {
  display: block;
  width: 16px;
  height: 2px;
  margin-inline: auto;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s var(--puer-ease), opacity .2s var(--puer-ease);
}
.puer-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.puer-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.puer-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel: menu wordt een uitschuifpaneel ------------------- */

@media (max-width: 991px) {
  .puer-burger { display: flex; }

  .puer-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(21rem, 84vw);
    background: var(--puer-red);
    padding: 6rem 1.75rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s var(--puer-ease);
    box-shadow: -20px 0 50px rgba(0, 0, 0, .25);
    z-index: 70;
  }

  .puer-nav.is-open { transform: translateX(0); }

  .puer-nav ul.mod-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .puer-nav ul.mod-menu > li > a {
    font-size: 1.25rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    white-space: normal;
  }
  .puer-nav ul.mod-menu > li > a::after { display: none; }

  .puer-nav ul.mod-menu ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    box-shadow: none;
    padding: 0 0 .5rem .9rem;
  }
  .puer-nav ul.mod-menu ul a { color: rgba(255, 255, 255, .85); }
  .puer-nav ul.mod-menu ul a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

  .puer-nav ul.mod-menu > li > a.menu-cta {
    text-align: center;
    margin-top: 1rem;
    border-bottom: 0;
  }

  /* De kopbalk is sticky met z-index 60 en vormt daarmee een eigen
     stacking context: het uitschuifpaneel erbinnen kan nooit bóven een
     laag met een hogere z-index uitkomen. Het verduisteringsvlak blijft
     daarom onder de balk — de hamburger blijft zo bereikbaar om te sluiten. */
  .puer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--puer-ease), visibility .3s;
    z-index: 58;
  }
  .puer-backdrop.is-visible { opacity: 1; visibility: visible; }

  body.puer-nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------
   5. Knoppen
   --------------------------------------------------------- */

.puer-site .puer-btn,
.puer-site .btn-primary,
.puer-site button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--puer-font-display);
  font-size: 1rem;
  line-height: 1.2;
  padding: .85rem 1.7rem;
  border-radius: var(--puer-radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--puer-ease), color .22s var(--puer-ease),
              border-color .22s var(--puer-ease), transform .22s var(--puer-ease),
              box-shadow .22s var(--puer-ease);
}

.puer-site .puer-btn:hover, .puer-site .puer-btn:focus { transform: translateY(-2px); }

.puer-site .puer-btn--primary,
.puer-site .btn-primary {
  background: var(--puer-red);
  border-color: var(--puer-red);
  color: #fff;
}
.puer-site .puer-btn--primary:hover, .puer-site .puer-btn--primary:focus,
.puer-site .btn-primary:hover, .puer-site .btn-primary:focus {
  background: var(--puer-red-dark);
  border-color: var(--puer-red-dark);
  color: #fff;
  box-shadow: var(--puer-shadow);
}

.puer-site .puer-btn--secondary {
  background: var(--puer-green);
  border-color: var(--puer-green);
  color: #fff;
}
.puer-site .puer-btn--secondary:hover, .puer-site .puer-btn--secondary:focus {
  background: var(--puer-green-dark);
  border-color: var(--puer-green-dark);
  color: #fff;
  box-shadow: var(--puer-shadow);
}

.puer-site .puer-btn--ghost {
  background: transparent;
  border-color: var(--puer-red);
  color: var(--puer-red);
}
.puer-site .puer-btn--ghost:hover, .puer-site .puer-btn--ghost:focus {
  background: var(--puer-red);
  color: #fff;
}

.puer-site .puer-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--puer-red);
}
.puer-site .puer-btn--light:hover, .puer-site .puer-btn--light:focus {
  background: var(--puer-green);
  border-color: var(--puer-green);
  color: #fff;
}

.puer-site .puer-btn--onred {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}
.puer-site .puer-btn--onred:hover, .puer-site .puer-btn--onred:focus { background: #fff; color: var(--puer-red); border-color: #fff; }

.puer-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.75rem 0 0;
}

/* ---------------------------------------------------------
   6. Tekstonderdelen
   --------------------------------------------------------- */

.puer-eyebrow {
  display: inline-block;
  font-family: var(--puer-font-display);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--puer-green-ink);
  margin: 0 0 .9rem;
}

.puer-eyebrow--light { color: rgba(255, 255, 255, .85); }

.puer-display {
  font-family: var(--puer-font-display);
  font-weight: 400;
  line-height: 1.08;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  margin: 0 0 .4em;
}

.puer-lead {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  line-height: 1.6;
  color: var(--puer-ink-soft);
  max-width: 62ch;
}

.puer-section {
  padding-block: var(--puer-section);
}
.puer-section--soft { background: var(--puer-paper-soft); }
.puer-section--deep { background: var(--puer-paper-deep); }
.puer-section--red { background: var(--puer-red); color: #fff; }
.puer-section--red :is(h1, h2, h3, h4, p) { color: #fff; }
.puer-section--red .puer-lead { color: rgba(255, 255, 255, .9); }

.puer-sectionhead {
  max-width: 62ch;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.puer-sectionhead--center { margin-inline: auto; text-align: center; }

/* ---------------------------------------------------------
   7. Hero
   --------------------------------------------------------- */

.puer-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--puer-red);
  overflow: hidden;
}

.puer-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.puer-site .puer-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.puer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(153, 35, 48, .90) 0%, rgba(194, 45, 61, .72) 48%, rgba(194, 45, 61, .22) 100%);
}

.puer-hero__inner {
  position: relative;
  padding-block: clamp(4rem, 11vw, 8.5rem);
  max-width: 46rem;
}

.puer-hero__inner h1,
.puer-hero__inner .puer-display { color: #fff; }

.puer-hero__inner .puer-lead { color: rgba(255, 255, 255, .92); }

/* Het Puer-watermerk uit de oude site, subtiel op de achtergrond */
.puer-hero__watermark {
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: min(38rem, 60vw);
  opacity: .09;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  .puer-hero__watermark { display: none; }
}

/* ---------------------------------------------------------
   8. Meldingsbalk (bv. de vacatureoproep van de oude site)
   --------------------------------------------------------- */

.puer-notice {
  background: var(--puer-green);
  color: #22280a;
  /* Zelfde behandeling als de kopbalk: een wit lijntje boven en onder met een
     zachte schaduw, zodat de vacaturebalk als eigen strook leest.
     position + z-index zijn nodig omdat de schaduw anders onder de volgende
     sectie verdwijnt. */
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 -4px 12px rgba(26, 12, 14, .18), 0 4px 12px rgba(52, 52, 52, .14);
}

.puer-notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-block: 1.15rem;
}

/* Rond merkje links in de balk: een persoon met vergrootglas, oftewel
   "wij zoeken personeel". Het icoon zit als masker in de CSS en niet als
   <svg> in de moduletekst — zo blijft de module in het beheer eenvoudig te
   bewerken, en de kleur volgt vanzelf mee als het Puer-groen wijzigt. */
.puer-notice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: #22280a;
}

.puer-notice__icon::before {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--puer-green);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='9.3' cy='6.8' r='3.9'/><path d='M2.6 20.6a7 7 0 0 1 10.4-6.1'/><circle cx='16.9' cy='16.9' r='3.7'/><path d='m19.7 19.7 2.5 2.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><circle cx='9.3' cy='6.8' r='3.9'/><path d='M2.6 20.6a7 7 0 0 1 10.4-6.1'/><circle cx='16.9' cy='16.9' r='3.7'/><path d='m19.7 19.7 2.5 2.5'/></svg>") center / contain no-repeat;
}

/* Oude tekstlabel — blijft bruikbaar als je liever een woord dan een icoon toont. */
.puer-notice__label {
  font-family: var(--puer-font-display);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: #22280a;
  color: var(--puer-green);
  padding: .3rem .8rem;
  border-radius: var(--puer-radius-pill);
  flex: 0 0 auto;
}

.puer-notice__text { flex: 1 1 22rem; margin: 0; }
.puer-notice a { color: #22280a; text-decoration: underline; }
.puer-notice a:hover { color: #000; }

.puer-site .puer-notice .puer-btn {
  padding: .55rem 1.2rem;
  font-size: .95rem;
  background: #22280a;
  border-color: #22280a;
  color: var(--puer-green);
}
.puer-site .puer-notice .puer-btn:hover { background: #000; border-color: #000; color: #fff; }

/* ---------------------------------------------------------
   9. Fototegels — het herkenningspunt van de oude homepage
   --------------------------------------------------------- */

.puer-tiles {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .puer-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.puer-site .puer-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--puer-radius);
  box-shadow: var(--puer-shadow-sm);
  text-decoration: none;
  color: #fff;
  aspect-ratio: 16 / 10;
  background: var(--puer-paper-deep);
  transition: box-shadow .35s var(--puer-ease), transform .35s var(--puer-ease);
}

.puer-site .puer-tile:hover, .puer-site .puer-tile:focus-visible {
  box-shadow: var(--puer-shadow-lg);
  transform: translateY(-4px);
  color: #fff;
}

.puer-site .puer-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--puer-ease);
}

.puer-tile:hover img, .puer-tile:focus-visible img { transform: scale(1.06); }

.puer-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 20, 20, .78) 0%, rgba(20, 20, 20, .28) 42%, rgba(20, 20, 20, 0) 72%);
  transition: background .35s var(--puer-ease);
}

.puer-tile:hover::after, .puer-tile:focus-visible::after {
  background: linear-gradient(to top, rgba(153, 35, 48, .88) 0%, rgba(153, 35, 48, .35) 48%, rgba(153, 35, 48, .05) 78%);
}

.puer-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.puer-tile__title {
  font-family: var(--puer-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  color: #fff;
  margin: 0;
  line-height: 1.1;
}

.puer-tile__meta {
  display: block;
  margin-top: .35rem;
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
  max-width: 34ch;
}

.puer-tile__arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .7rem;
  font-family: var(--puer-font-display);
  font-size: .92rem;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--puer-ease), transform .3s var(--puer-ease);
}
.puer-tile:hover .puer-tile__arrow,
.puer-tile:focus-visible .puer-tile__arrow { opacity: 1; transform: translateY(0); }

@media (hover: none) {
  .puer-tile__arrow { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   10. Kaarten, USP's en cijfers
   --------------------------------------------------------- */

.puer-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.puer-card {
  --puer-card-pad: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--puer-rule);
  border-radius: var(--puer-radius);
  padding: var(--puer-card-pad);
  transition: transform .3s var(--puer-ease), box-shadow .3s var(--puer-ease), border-color .3s var(--puer-ease);
}

.puer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--puer-shadow);
  border-color: transparent;
}

.puer-card h3 { margin-bottom: .5rem; }
.puer-card p { color: var(--puer-ink-soft); margin-bottom: 0; }

/* De groene streep links is geen rand maar een eigen laagje, want alleen zo
   kan hij een schaduw op de kaart werpen. overflow: hidden laat de streep de
   afgeronde hoeken van de kaart volgen. */
.puer-card--accent {
  position: relative;
  overflow: hidden;
  border-left: 0;
  padding-left: calc(var(--puer-card-pad) + 4px);
}

.puer-card--accent::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--puer-green);
  box-shadow: 3px 0 9px rgba(52, 52, 52, .3);
}

/* Bij het zweven komt de kaart omhoog; de streep krijgt dan iets meer diepte. */
.puer-card--accent:hover::before { box-shadow: 4px 0 13px rgba(52, 52, 52, .36); }

.puer-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--puer-red-tint);
  color: var(--puer-red);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.puer-card--accent .puer-card__icon { background: var(--puer-green-tint); color: var(--puer-green-ink); }

.puer-facts {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  text-align: center;
}

.puer-fact__number {
  display: block;
  font-family: var(--puer-font-display);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--puer-red);
}

.puer-section--red .puer-fact__number { color: #fff; }

.puer-fact__label {
  display: block;
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--puer-ink-soft);
}

.puer-section--red .puer-fact__label { color: rgba(255, 255, 255, .85); }

/* Opsomming met vinkjes */
.puer-checklist {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: .6rem;
}

.puer-checklist li {
  position: relative;
  padding-inline-start: 1.9rem;
}

.puer-checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .52em;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--puer-green);
}

/* Media-blok: tekst naast beeld */
.puer-split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .puer-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .puer-split--reverse .puer-split__media { order: 2; }
}

.puer-split__media img {
  width: 100%;
  border-radius: var(--puer-radius);
  box-shadow: var(--puer-shadow);
  display: block;
}

/* Beeldenrij (bv. sfeerbeeld van de winkel) */
.puer-gallery {
  display: grid;
  gap: clamp(.6rem, 1.6vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.puer-site .puer-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--puer-radius-sm);
  display: block;
  transition: transform .4s var(--puer-ease);
}
.puer-gallery img:hover { transform: scale(1.03); }

/* Paginatekst met een fotogalerij aan de rechterkant (bv. dagbesteding-
   subpagina's). Onder de 860px-drempel schuift de galerij gewoon onder de
   tekst, net als bij .puer-split. */
.puer-content-photos {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 860px) {
  .puer-content-photos { grid-template-columns: minmax(0, 1fr) 16rem; }
}

.puer-content-photos__photos .puer-gallery {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.puer-content-photos__photos .puer-gallery img {
  box-shadow: var(--puer-shadow-sm);
}

@media (min-width: 860px) {
  .puer-content-photos__photos .puer-gallery { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------
   11. Oproepblok
   --------------------------------------------------------- */

.puer-cta {
  background: var(--puer-red);
  color: #fff;
  border-radius: var(--puer-radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 860px) {
  .puer-cta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; }
}

.puer-cta :is(h2, h3, p) { color: #fff; }
.puer-cta p { color: rgba(255, 255, 255, .9); }
.puer-cta .puer-btnrow { margin-top: 0; }

.puer-contactlines {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.puer-contactlines a { color: #fff; text-decoration: underline; }
.puer-contactlines a:hover { color: var(--puer-green); }

/* ---------------------------------------------------------
   12. Voettekst
   --------------------------------------------------------- */

.puer-footer {
  background: var(--puer-red);
  color: rgba(255, 255, 255, .88);
  margin-top: var(--puer-section);
  /* Zelfde afscheiding als onder de kopbalk en rond de vacaturebalk: een dun
     wit lijntje met een zachte schaduw. De schaduw valt hier omhoog, de
     inhoud in — daarvoor is position + z-index nodig, anders tekent de
     sectie erboven eroverheen. */
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 -4px 14px rgba(52, 52, 52, .16);
}

.puer-home .puer-footer { margin-top: 0; }

.puer-footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .puer-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.puer-footer :is(h2, h3, h4) {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.puer-footer a { color: #fff; text-decoration: none; }
.puer-footer a:hover, .puer-footer a:focus { color: var(--puer-green); text-decoration: underline; }

.puer-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.puer-site .puer-footer .puer-brandmark {
  height: 64px;
  width: auto;
  margin-bottom: 1rem;
}

/* De keurmerken staan op een eigen rij over de volle breedte van de voet —
   net als op de oude site, waar ze naast elkaar onderin stonden. */
.puer-footer__badges {
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding-block: 1.5rem;
}

.puer-footer__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem clamp(2rem, 5vw, 3.5rem);
}
/* Keurmerken die vrijstaand zijn (transparante achtergrond) krijgen de klasse
   "is-plain" en staan direct op het rood. Logo's die als rechthoekige kaart
   zijn ontworpen — zoals Quasir, met lichtgrijze letters op wit — laten zich
   niet vrijstaand maken en houden daarom hun witte vlak. */
.puer-site .puer-footer__marks img {
  height: 60px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 5px 7px;
  display: block;
}

.puer-site .puer-footer__marks img.is-plain {
  background: none;
  padding: 0;
}

/* Het ISO-logo bestaat alleen als 50x50; groter tonen maakt het wazig. */
.puer-site .puer-footer__marks img.is-compact {
  height: 50px;
}

/* Het Fairtrade-logo is een dicht kleurvlak en oogt bij gelijke hoogte
   zwaarder dan de andere drie. Optisch iets kleiner brengt de rij in balans. */
.puer-site .puer-footer__marks img.is-small {
  height: 52px;
}

.puer-site .puer-footer__marks a {
  display: inline-flex;
  border-radius: 8px;
  transition: transform .2s var(--puer-ease), box-shadow .2s var(--puer-ease);
}

.puer-site .puer-footer__marks a:hover,
.puer-site .puer-footer__marks a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.puer-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.puer-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.25rem;
  font-size: .9rem;
}

.puer-footer__bottom ul,
.puer-footer__bottom ul.mod-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* Zonder align-items rekken de items uit tot de hoogte van de rij en zakt de
     inlogknop — die hoger is dan de tekstlinks — een paar pixels weg. Op het
     midden uitlijnen houdt alles op één lijn, ongeacht de knophoogte. */
  align-items: center;
  gap: .4rem 1.25rem;
}

.puer-footer__copy { margin: 0; color: rgba(255, 255, 255, .75); }

/* Inloggen krijgt in de voetbalk de vorm van een klein knopje, zodat het
   opvalt tussen de juridische links. Zet bij het menu-item onder Linktype
   het veld "CSS-stijl voor link" op puer-loginlink. */
.puer-site .puer-footer__bottom a.puer-loginlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .9rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--puer-radius-pill);
  text-decoration: none;
  transition: background-color .2s var(--puer-ease), color .2s var(--puer-ease), border-color .2s var(--puer-ease);
}

.puer-site .puer-footer__bottom a.puer-loginlink::before {
  content: "";
  width: .85rem;
  height: .85rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2.2'/><path d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10.5' width='16' height='10.5' rx='2.2'/><path d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/></svg>") center / contain no-repeat;
}

.puer-site .puer-footer__bottom a.puer-loginlink:hover,
.puer-site .puer-footer__bottom a.puer-loginlink:focus {
  background: #fff;
  border-color: #fff;
  color: var(--puer-red);
  text-decoration: none;
}

/* Naar-boven-knop */
.puer-site .puer-backtotop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--puer-red);
  color: #fff;
  box-shadow: var(--puer-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s var(--puer-ease), transform .28s var(--puer-ease), visibility .28s, background-color .2s;
  z-index: 55;
}
.puer-backtotop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.puer-site .puer-backtotop svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.puer-site .puer-backtotop:hover, .puer-site .puer-backtotop:focus { background: var(--puer-red-dark); color: #fff; }

/* ---------------------------------------------------------
   13. Joomla-onderdelen bijschaven
   --------------------------------------------------------- */

.puer-content .page-header h1,
.puer-content .item-title { margin-bottom: 1.2rem; }

/* Leesbreedte: lopende tekst blijft rond de 70 tekens per regel, terwijl
   bredere onderdelen (beeldenrij, tekst-naast-beeld, oproepblok) de volle
   kolom mogen gebruiken. */
.puer-content main :is(p, h2, h3, h4, h5, ul, ol, blockquote, dl) {
  max-width: 70ch;
}

.puer-content main :is(.puer-gallery, .puer-split, .puer-cta, .puer-grid, .puer-tiles, .puer-facts) :is(p, h2, h3, h4, ul, ol) {
  max-width: none;
}

.puer-content main :is(.puer-narrow, .puer-center) :is(p, h2, h3) {
  margin-inline: auto;
}

.puer-content .article-info {
  font-size: .88rem;
  color: var(--puer-muted);
  margin-bottom: 1.5rem;
}
.puer-content .article-info dd { display: inline; margin-inline-end: 1rem; }

.puer-content .com-content-article__body > :is(h2, h3) { margin-top: 2.2rem; }

/* Kruimelpad */
.puer-content .mod-breadcrumbs__wrapper,
.puer-content nav[aria-label*="ruimel"],
.puer-content .breadcrumb {
  font-size: .88rem;
  margin-bottom: 1.75rem;
}
.puer-content .breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  padding: 0;
  background: transparent;
}
.puer-content .breadcrumb a { color: var(--puer-ink-soft); text-decoration: none; }
.puer-content .breadcrumb a:hover { color: var(--puer-red); }

/* Formulieren — ook het contactformulier van Joomla */
.puer-site :is(input[type="text"], input[type="email"], input[type="tel"],
               input[type="url"], input[type="password"], input[type="search"],
               input[type="number"], select, textarea),
.puer-site .form-control,
.puer-site .form-select {
  width: 100%;
  font-family: var(--puer-font-body);
  font-size: 1rem;
  color: var(--puer-ink);
  background: #fff;
  border: 1px solid var(--puer-rule);
  border-radius: var(--puer-radius-sm);
  padding: .75rem 1rem;
  transition: border-color .2s var(--puer-ease), box-shadow .2s var(--puer-ease);
}

.puer-site :is(input, select, textarea):focus,
.puer-site .form-control:focus,
.puer-site .form-select:focus {
  border-color: var(--puer-red);
  box-shadow: 0 0 0 3px rgba(194, 45, 61, .14);
  outline: none;
}

.puer-site textarea { min-height: 10rem; resize: vertical; }

.puer-site label,
.puer-site .control-label label {
  font-family: var(--puer-font-display);
  font-size: .95rem;
  color: var(--puer-ink);
  margin-bottom: .35rem;
  display: inline-block;
}

.puer-site .control-group { margin-bottom: 1.25rem; }
.puer-site .required .star, .puer-site .star { color: var(--puer-red); }

.puer-field { margin-bottom: 1.1rem; }

/* Systeemmeldingen */
.puer-site .alert {
  border: 1px solid var(--puer-rule);
  border-inline-start: 4px solid var(--puer-green);
  border-radius: var(--puer-radius-sm);
  background: var(--puer-paper-soft);
  color: var(--puer-ink);
  padding: 1rem 1.25rem;
}
.puer-site .alert-danger, .puer-site .alert-error { border-inline-start-color: var(--puer-red); background: var(--puer-red-tint); }

/* Paginering */
.puer-site .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  padding: 0;
  margin-top: 2.5rem;
}
.puer-site .pagination .page-link {
  border: 1px solid var(--puer-rule);
  border-radius: var(--puer-radius-sm);
  color: var(--puer-ink);
  padding: .5rem .85rem;
  text-decoration: none;
}
.puer-site .pagination .active .page-link {
  background: var(--puer-red);
  border-color: var(--puer-red);
  color: #fff;
}

/* Modules met kaart-opmaak in zijbalken */
.puer-sidebar .card {
  border: 1px solid var(--puer-rule);
  border-radius: var(--puer-radius);
  background: #fff;
}
.puer-sidebar .card-header {
  background: transparent;
  border-bottom: 1px solid var(--puer-rule);
  font-family: var(--puer-font-display);
  font-size: 1.05rem;
  color: var(--puer-red);
}

/* Foutpagina en offline */
.puer-error { max-width: 46rem; padding-block: clamp(2rem, 6vw, 4rem); }

.puer-offline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--puer-paper-soft);
  padding: 2rem;
}
.puer-offline__card {
  background: #fff;
  border-radius: var(--puer-radius);
  box-shadow: var(--puer-shadow);
  padding: clamp(2rem, 5vw, 3rem);
  max-width: 26rem;
  width: 100%;
  text-align: center;
}
.puer-offline__form { margin-top: 1.5rem; text-align: start; }

/* ---------------------------------------------------------
   14. Hulpklassen
   --------------------------------------------------------- */

.puer-center { text-align: center; }
.puer-mt-0 { margin-top: 0 !important; }
.puer-narrow { max-width: var(--puer-shell-narrow); margin-inline: auto; }

.visually-hidden,
.puer-site .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   15. Bewegingsvoorkeur en printen
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .puer-site *,
  .puer-site *::before,
  .puer-site *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .puer-header, .puer-footer, .puer-backtotop, .puer-notice { display: none !important; }
  .puer-site { color: #000; background: #fff; }
  .puer-site a::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ---------------------------------------------------------
   16. Openingstijden-tabel
   --------------------------------------------------------- */

.puer-hours {
  width: 100%;
  max-width: 26rem;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.puer-hours :is(th, td) {
  text-align: start;
  padding: .6rem .25rem;
  border-bottom: 1px solid var(--puer-rule);
}

.puer-hours th {
  font-family: var(--puer-font-display);
  font-weight: 400;
  color: var(--puer-ink);
}

.puer-hours td { color: var(--puer-ink-soft); text-align: end; }

/* ---------------------------------------------------------
   17. Cookiemelding
   --------------------------------------------------------- */

.puer-cookiebar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  background: #fff;
  color: var(--puer-ink);
  border-top: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 -6px 24px rgba(52, 52, 52, .22);
  animation: puer-cookiebar-in .35s var(--puer-ease) both;
}

.puer-cookiebar[hidden] { display: none; }

@keyframes puer-cookiebar-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.puer-cookiebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.1rem;
}

.puer-cookiebar__text {
  flex: 1 1 26rem;
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--puer-ink-soft);
}

.puer-cookiebar__text a { color: var(--puer-red); }

.puer-cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  flex: 0 0 auto;
}

/* Weigeren en accepteren moeten even zwaar ogen — een weggemoffelde
   weigerknop is een donker patroon en juridisch niet houdbaar. */
.puer-site .puer-cookiebar .puer-btn {
  padding: .6rem 1.4rem;
  font-size: .95rem;
}

@media (max-width: 600px) {
  .puer-cookiebar__actions { width: 100%; }
  .puer-site .puer-cookiebar .puer-btn { flex: 1 1 0; justify-content: center; }
}

/* Naast de naar-boven-knop, zodat ze elkaar niet overlappen */
.puer-cookiebar:not([hidden]) ~ .puer-backtotop { bottom: 6.5rem; }

/* ---------------------------------------------------------
   18. Video
   --------------------------------------------------------- */

/* preload="none" plus een poster: de pagina laadt de video pas als de
   bezoeker op afspelen drukt. De film staat op onze eigen server, dus er
   gaat niets naar YouTube of Vimeo — en er is dus ook geen toestemming
   voor cookies van derden nodig. */
.puer-video {
  margin: clamp(2rem, 4vw, 3rem) 0;
  max-width: none;
}

.puer-site .puer-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--puer-radius);
  box-shadow: var(--puer-shadow);
  background: var(--puer-ink);
}

.puer-video figcaption {
  margin-top: .75rem;
  font-size: .92rem;
  color: var(--puer-ink-soft);
}