/* ══ PSW BRAND TOKENS ══ */
:root {
  --sinopel:       #008000;
  --sinopel-nav:   #006600;
  --sinopel-btn:   #006600;
  --sinopel-dark:  #004D00;
  --sinopel-light: #D6F5D6;
  --sinopel-pale:  #F0FBF0;

  --purper:        #7B2D8B;
  --purper-dark:   #62246F;
  --purper-light:  #EDD5F5;
  --purper-pale:   #FBF3FD;

  --amber:         #D97706;
  --amber-pale:    #FAEEDA;
  /* Donkerdere varianten, enkel voor tekst en iconen óp de bijbehorende pale tint.
     De basistokens hierboven halen daar 2,8 tot 3,3:1 en blijven dus alleen
     bruikbaar op wit. */
  --amber-on-pale: #A54D08;

  --blauw:         #0891B2;
  --blauw-pale:    #E0F2FE;
  --blauw-on-pale: #0E7490;

  --teal:          #0D9488;
  --teal-pale:     #CCFBF1;
  --teal-on-pale:  #0F766E;

  --rose:          #BE185D;
  --rose-pale:     #FDF2F8;

  --cream:         #FAF7F2;
  --cream-border:  #EAE4D8;
  --cream-deep:    #EDE6D9;

  /* Het PSW-schild als vol vlak, gedeeld zoals het echte schild: sinopel links,
     wit in het midden, purper rechts. Dat zijn precies de drie schildkleuren.
     Geen uitroepteken en geen monogram erin. Beide zijn geprobeerd en visueel
     vergeleken: de calligrafie van het monogram valt onder ~40px uiteen tot een
     kriebel, en een uitgesneden uitroepteken trekt op deze schaal te veel
     aandacht voor iets dat enkel een markering is.

     Het witte streepje is 1,8 eenheden breed, wat op 15px neerkomt op ruim één
     pixel. Op ware grootte vergeleken met 1,2 en 2,4: bij 1,2 verdwijnt het op
     13px, bij 2,4 vallen de twee velden uit elkaar tot losse vormen.

     Het streepje ligt bínnen het schild, ingeklemd tussen groen en purper. Het
     leest dus af tegen die velden en niet tegen de pagina-achtergrond, en werkt
     daardoor ook op de sectie met bg-white.

     De kleuren zitten in de SVG en komen dus niet van currentColor. Dat is
     bewust: de marker is altijd het schild in de verenigingskleuren, terwijl de
     eyebrow-tekst zelf groen of purper kan zijn. Een marker die meekleurt zou
     de tweedeling van het schild juist wegpoetsen.

     De id in de clipPath is gescopet tot dit SVG-document en botst dus niet
     met id's op de pagina. */
  --psw-schild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CclipPath id='c'%3E%3Cpath d='M3 2h18v12c0 4.5-4.6 7-9 9-4.4-2-9-4.5-9-9z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='11.1' height='24' fill='%23006600'/%3E%3Crect x='11.1' width='1.8' height='24' fill='%23fff'/%3E%3Crect x='12.9' width='11.1' height='24' fill='%237B2D8B'/%3E%3C/g%3E%3C/svg%3E");

  /* Hetzelfde schild voor op de groene vlakken, maar omgekeerd opgebouwd. Een
     aparte versie is nodig omdat .psw-hero als achtergrond --sinopel-nav heeft
     en .psw-footer --sinopel-dark: allebei het groen van het linkerveld, en
     daar verliest het gewone schild zijn groene helft en leest het als een half
     schild. Nagemeten op die achtergronden.

     Hier dus twee witte velden met de deling in purper, in plaats van twee
     gekleurde velden met een witte deling. Een half purper vlak bleek te zwaar
     tegen het donkergroen; als lijn houdt het purper de tweedeling vast zonder
     de marker te laten kantelen naar één kleur.

     Lijnbreedte 2,4 eenheden, 1,6px op 16px. Op ware grootte vergeleken met
     1,8, 3,0 en 4,0: bij 1,8 wordt de lijn schraal, vanaf 4,0 valt het schild
     in twee losse helften uiteen. Breder dan de 1,8 van het cream-schild, want
     daar scheidt de streep twee velden en hier is ze zelf het accent. */
  --psw-schild-donker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3CclipPath id='c'%3E%3Cpath d='M3 2h18v12c0 4.5-4.6 7-9 9-4.4-2-9-4.5-9-9z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Crect x='10.8' width='2.4' height='24' fill='%237B2D8B'/%3E%3C/g%3E%3C/svg%3E");

  --font-display:  'Outfit', system-ui, sans-serif;
  --font-body:     'Outfit', system-ui, sans-serif;

  /* Bootstrap overrides */
  --bs-body-font-family:   var(--font-body);
  --bs-body-bg:            var(--cream);
  --bs-body-color:         #1A1A1A;
  /* Hoekenschaal, vier stappen met elk een betekenis:
       8px   kleine elementen: badges, datumblokjes, tags
       16px  beelden en kleine kaarten
       24px  grote kaarten en panelen
       0     alles wat de volle breedte pakt
     Gebruik deze tokens en geen losse pixelwaarden; een radius die niet
     meeschaalt met het formaat leest als slordigheid in plaats van als keuze. */
  --bs-border-radius:      8px;
  --bs-border-radius-lg:   16px;
  --bs-border-radius-xl:   24px;
  --bs-border-radius-pill: 9999px;
  --bs-primary:            var(--sinopel-nav);
  --bs-primary-rgb:        0, 102, 0;
  --bs-secondary:          var(--purper);
  --bs-secondary-rgb:      123, 45, 139;
  --bs-link-color:         var(--sinopel-nav);
}

/* ══ TYPOGRAPHY ══ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
a { text-decoration: none; color: inherit; }
.skip-link { padding: 12px 20px; }

/* Links binnen lopende tekst (RTE-content, event-beschrijvingen).
   Geen vaste onderstreping, maar dan moet de kleur het werk doen: WCAG 1.4.1
   staat kleur-alleen toe zolang de link minstens 3:1 contrast heeft met de
   omringende tekst én er bij hover en focus een tweede signaal bijkomt.

   Vandaar --sinopel (#008000) en niet --sinopel-nav (#006600): dat laatste
   haalt tegenover de zwarte lopende tekst maar 2,4:1. #008000 komt op 3,39:1,
   en blijft met 5,14:1 op wit en 4,81:1 op cream ruim leesbaar. Het is de enige
   tint die aan alle drie voldoet: lichter zakt door de ondergrens op cream,
   donkerder haalt de 3:1 tegenover de tekst niet.

   Wijzigt iemand later de kleur van de lopende tekst of de crèmetint, reken dan
   opnieuw na. De marge is één stap breed.

   Ook frame-type-textmedia: dat is hetzelfde soort lopende tekst, alleen met een
   mediaveld erbij. De handleiding-subsite gebruikt dat CType, en zonder deze
   toevoeging zou die stilzwijgend terugvallen op zwarte links zonder onderstreping. */
:is(.frame-type-text, .frame-type-textmedia) a,
.event-detail-description a {
  color: var(--sinopel);
}
:is(.frame-type-text, .frame-type-textmedia) a:hover,
:is(.frame-type-text, .frame-type-textmedia) a:focus-visible,
.event-detail-description a:hover,
.event-detail-description a:focus-visible {
  color: var(--sinopel-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Genummerde titels (voorwaarden, privacyverklaring...): browser genereert het cijfer via een CSS counter,
   i.p.v. het handmatig in de titel te typen. Geen ol/li nodig (CKEditor's lijst-plugin laat geen
   headings toe binnen een <li>), dus gewoon een class op de h3 zelf. */
:is(.frame-type-text, .frame-type-textmedia) { counter-reset: section; }
:is(.frame-type-text, .frame-type-textmedia) h3.numbered {
  counter-increment: section;
}
:is(.frame-type-text, .frame-type-textmedia) h3.numbered::before {
  content: counter(section) ". ";
}
/* Alles wat na een genummerde titel komt (tekst én lijsten) sluit automatisch aan op de titeltekst,
   zonder dat de redacteur zelf een inspring-class moet kiezen */
:is(.frame-type-text, .frame-type-textmedia) h3.numbered ~ p,
:is(.frame-type-text, .frame-type-textmedia) h3.numbered ~ ul {
  padding-left: 23px;
}
:is(.frame-type-text, .frame-type-textmedia) h3.numbered ~ ul {
  text-indent: 10px;
  list-style-position: inside;
}

/* Ruimte tussen opeenvolgende standaard content-elementen: zonder dit plakken bv. twee
   textpic/textmedia-elementen (elk met een vullende afbeelding) direct tegen elkaar.
   Geen margin-top op het eerste element, dat heeft de pagina-container's eigen py-5 al. */
.frame + .frame {
  margin-top: 3rem;
}

/* ══ TEXTPIC / TEXTMEDIA — standaard TYPO3 "afbeelding naast tekst"-elementen ══
   Zonder deze regels blijft de afbeelding maar zo hoog als haar eigen beeldverhouding
   (ce-gallery krijgt geen hoogte van de tekstkolom mee), wat een lege, niet-vullende
   ruimte onder de foto oplevert zodra de tekst ernaast langer is. */

/* Positie "naast elkaar, niet omlopend" (redacteur kiest links/rechts zonder tekstomloop):
   afbeelding en tekst worden twee kolommen van gelijke hoogte, de foto vult haar kolom volledig. */
.ce-textpic.ce-nowrap {
  display: flex;
  align-items: stretch;
  gap: 2.5rem;
}
.ce-textpic.ce-left.ce-nowrap { flex-direction: row; }
.ce-textpic.ce-right.ce-nowrap { flex-direction: row-reverse; }
.ce-textpic.ce-nowrap .ce-gallery {
  flex: 0 0 38%;
  max-width: 38%;
}
.ce-textpic.ce-nowrap .ce-bodytext {
  flex: 1 1 auto;
  min-width: 0;
}
.ce-textpic.ce-nowrap .ce-gallery,
.ce-textpic.ce-nowrap .ce-row,
.ce-textpic.ce-nowrap .ce-column,
.ce-textpic.ce-nowrap figure.image {
  height: 100%;
  margin: 0;
}
.ce-textpic.ce-nowrap figure.image,
.ce-textpic.ce-nowrap figure.image a {
  display: block;
  height: 100%;
}
.ce-textpic.ce-nowrap .image-embed-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--bs-border-radius-lg);
}

/* Positie "links/rechts met tekstomloop" (klassieke float): foto behoudt haar eigen
   verhouding, tekst vloeit eromheen. Geen hoogte-fill nodig, wel een leesbare marge. */
.ce-textpic.ce-left:not(.ce-nowrap) .ce-gallery {
  float: left;
  max-width: 40%;
  margin: 0 2rem 1rem 0;
}
.ce-textpic.ce-right:not(.ce-nowrap) .ce-gallery {
  float: right;
  max-width: 40%;
  margin: 0 0 1rem 2rem;
}
.ce-textpic.ce-left:not(.ce-nowrap) .image-embed-item,
.ce-textpic.ce-right:not(.ce-nowrap) .image-embed-item {
  width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius-lg);
}

/* Positie "boven/onder": afbeelding als volle-breedte blok boven of onder de tekst. */
.ce-textpic.ce-above .ce-gallery,
.ce-textpic.ce-below .ce-gallery {
  margin-bottom: 1.5rem;
}
.ce-textpic.ce-above .image-embed-item,
.ce-textpic.ce-below .image-embed-item,
.ce-textpic.ce-center .image-embed-item {
  width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius-lg);
}

/* Op smalle schermen altijd stapelen: naast-elkaar-lay-out werkt niet meer op mobiel */
@media (max-width: 767.98px) {
  .ce-textpic.ce-nowrap {
    flex-direction: column !important;
  }
  .ce-textpic.ce-nowrap .ce-gallery {
    flex-basis: auto;
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
  }
  .ce-textpic.ce-nowrap .image-embed-item {
    height: auto;
  }
  .ce-textpic.ce-left:not(.ce-nowrap) .ce-gallery,
  .ce-textpic.ce-right:not(.ce-nowrap) .ce-gallery {
    float: none;
    max-width: 100%;
    margin: 0 0 1.5rem;
  }
}

/* ══ BOOTSTRAP BUTTON OVERRIDES ══ */
.btn-primary {
  --bs-btn-bg:           var(--sinopel-btn);
  --bs-btn-border-color: var(--sinopel-btn);
  --bs-btn-hover-bg:     var(--sinopel-dark);
  --bs-btn-hover-border-color: var(--sinopel-dark);
  --bs-btn-active-bg:    var(--sinopel-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .875rem;
}
.btn-secondary {
  --bs-btn-bg:           var(--purper);
  --bs-btn-border-color: var(--purper);
  --bs-btn-hover-bg:     var(--purper-dark);
  --bs-btn-hover-border-color: var(--purper-dark);
  --bs-btn-active-bg:    var(--purper-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .875rem;
}
.btn-outline-primary {
  --bs-btn-color:         var(--sinopel-btn);
  --bs-btn-border-color:  var(--sinopel-btn);
  --bs-btn-hover-bg:      var(--sinopel-pale);
  --bs-btn-hover-color:   var(--sinopel-btn);
  --bs-btn-hover-border-color: var(--sinopel-btn);
  --bs-btn-active-bg:     var(--sinopel-light);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .875rem;
}
.btn { transition: all .15s; }
.btn:hover { transform: translateY(-1px); }

/* EXT:form-formulieren (contact, partner, nieuwsbrief, lidworden, eerstejaarsgids): verzendknop
   rechts uitgelijnd i.p.v. de standaard linkse uitlijning. .form-navigation is de universele
   wrapperklasse die EXT:form om de vorige/volgende/verzendknop zet in elk formulier. */
.form-navigation { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

.pagination {
  --bs-pagination-color:              var(--sinopel-nav);
  --bs-pagination-hover-color:        var(--sinopel-dark);
  --bs-pagination-hover-bg:           var(--sinopel-pale);
  --bs-pagination-focus-color:        var(--sinopel-dark);
  --bs-pagination-focus-box-shadow:   0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);
  --bs-pagination-active-bg:          var(--sinopel-nav);
  --bs-pagination-active-border-color: var(--sinopel-nav);
}

/* ══ SCROLL REVEAL ══ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ══ NAVBAR ══ */
.psw-navbar {
  background: var(--sinopel-nav);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 12px rgba(0,77,0,.25);
}
.psw-shield {
  width: 30px; height: 36px;
  background: var(--purper);
  border-radius: 3px 3px 50% 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0; letter-spacing: -.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.psw-logo {
  width: 100px; height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}

/* De browser tekent standaard een bijna zwarte rechthoek van 1px om logo én
   tekst zodra deze link focus krijgt. Dat oogt als een kader om het logo.
   Weghalen zonder vervanging kan niet: WCAG 2.4.7 vraagt een zichtbare focus.
   Daarom een witte streep onder de hele merklink in plaats van een omlijning.
   Bewust een box-shadow en geen text-decoration: zo ligt de lijn onder logo én
   tekst samen, en blijft de focus ook meetbaar voor de toetsenbordtest. */
.navbar-brand:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 0 #fff;
}
.psw-brand-name { font-weight: 700; font-size: 16px; color: #fff; line-height: 1.1; }
.psw-brand-sub  { font-size: 11px; color: rgba(255,255,255,.78); font-weight: 400; }
.nav-portal-link    { font-size: 13px; font-weight: 500; opacity: .8; }
.nav-membership-btn {
  font-size: 13px;
  padding: 7px 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.nav-membership-btn:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.nav-search-toggle  { opacity: .75; transition: opacity .15s; margin-left: 14px; }
.nav-search-toggle:hover { opacity: 1; }
.nav-search-toggle[aria-expanded="true"] { display: none; }
.nav-search-bar     { padding-left: 10px; }
.nav-search-bar .tx-indexedsearch-hidden-fields { display: none; }
.nav-search-bar .tx-indexedsearch-form { display: flex; align-items: center; gap: 6px; width: 300px; margin-bottom: 0; }
.nav-search-bar .tx-indexedsearch-searchbox-sword {
  flex: 1 1 auto;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: none;
}
.nav-search-bar .tx-indexedsearch-searchbox-sword::placeholder { color: rgba(255,255,255,.55); }
.nav-search-bar .tx-indexedsearch-searchbox-sword:focus {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  box-shadow: none;
  color: #fff;
}
.nav-search-bar .tx-indexedsearch-searchbox-button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  font-size: 14px;
  padding: 0;
  border-radius: 50%;
  transition: all .15s;
}
.nav-search-bar .tx-indexedsearch-searchbox-button:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
@media (max-width: 991.98px) {
  .psw-navbar { padding-bottom: 1em; }
  .nav-search-toggle, #navSearch { margin-left: auto; }
  .nav-search-bar .tx-indexedsearch-form { width: 180px; }
}
.psw-navbar .nav-link {
  color: rgba(255,255,255,.8) !important;
  font-size: 14px; font-weight: 500;
  padding: 22px 12px !important;
  border-bottom: 3px solid transparent;
  transition: all .15s; white-space: nowrap;
}
.psw-navbar .nav-link:hover,
.psw-navbar .nav-link.active,
.psw-navbar .nav-link.show { color: #fff !important; border-bottom-color: rgba(255,255,255,.6); }
.psw-navbar .dropdown-toggle::after { margin-left: 4px; }

/* Mega dropdown */
.mega-menu {
  border: none;
  border-radius: 0 0 var(--bs-border-radius-xl) var(--bs-border-radius-xl);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 1.5rem; background: #fff; min-width: 640px;
  border-top: 3px solid var(--sinopel-nav);
}
/* Zelfde schildmarker als .section-eyebrow. Het mega-paneel heeft een witte
   achtergrond, dus hier de lichte versie: de witte deling van het schild ligt
   tussen het groene en purperen veld en blijft daardoor ook op wit zichtbaar.
   15px, want de tekst is hier net als bij .section-eyebrow 11px. */
.mega-col-title {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sinopel-nav); margin-bottom: .75rem; padding-bottom: .4rem;
  border-bottom: 1px solid #EFEFED;
  display: flex; align-items: center; gap: 7px;
}
.mega-col-title::before {
  content: '';
  flex: none; inline-size: 15px; block-size: 15px;
  background: var(--psw-schild) center / contain no-repeat;
}
.mega-link { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; transition: transform .1s; }
.mega-link:hover { transform: translateX(3px); }
.mega-link-icon {
  width: 28px; height: 28px; border-radius: var(--bs-border-radius);
  background: var(--sinopel-pale); display: flex; align-items: center;
  justify-content: center; color: var(--sinopel-nav); font-size: 14px;
  flex-shrink: 0; margin-top: 1px;
}
.mega-link-icon.purple { background: var(--purper-pale); color: var(--purper); }
.mega-link-title { font-size: 14px; font-weight: 600; color: #1A1A1A; line-height: 1.2; }
.mega-link-sub   { font-size: 12px; color: #6B6B6B; }
.mega-cta-card {
  background: linear-gradient(135deg, var(--sinopel-nav), var(--sinopel-dark));
  border-radius: var(--bs-border-radius-lg); padding: 1.25rem; color: #fff; height: 100%;
}
.mega-cta-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.mega-cta-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; line-height: 1.2; }
.mega-cta-meta  { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 12px; }
.mega-menu--compact { min-width: 300px; }
.mega-col-title a { color: inherit; text-decoration: none; }
.mega-col-title a:hover { text-decoration: underline; }
.mega-link[aria-current="page"] .mega-link-title { color: var(--sinopel-nav); }

/* ══ HERO ══ */
.psw-hero { background: var(--sinopel-nav); position: relative; overflow: hidden; padding: 80px 0 60px; }
.hero-blob-1 {
  position: absolute; top: -80px; right: -100px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(123,45,139,.35) 0%, transparent 70%);
  pointer-events: none;
}
.hero-blob-2 {
  position: absolute; bottom: -60px; left: 40%;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,77,0,.4) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none;
}
/* Zelfde schildmarker als .section-eyebrow, maar in de omgekeerde opbouw voor
   groene vlakken. Zie --psw-schild-donker. */
.hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(173,234,173,.9); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.hero-eyebrow::before {
  content: '';
  flex: none; inline-size: 16px; block-size: 16px;
  background: var(--psw-schild-donker) center / contain no-repeat;
}
.hero-title {
  font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px);
  font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.025em; margin-bottom: 18px;
}
/* .6 en niet .5: op #006600 haalt de outline daarmee 3,63:1 en dus de 3:1 die
   WCAG voor grote tekst vraagt. Bij .5 bleef ze op 2,96 steken. */
.hero-title span { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.6); }
.hero-title-sm   { font-size: clamp(28px, 4vw, 42px); }
.hero-cta         { color: var(--sinopel-nav); font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.hero-cta-outline { font-size: 14px; border-width: 1.5px; }
.hero-sub {
  font-size: 19px; font-weight: 500; color: rgba(255,255,255,.95);
  letter-spacing: normal;      /* niet de krappe tracking van .hero-title erven */
  max-width: 540px; line-height: 1.65; margin-bottom: 32px;
  text-wrap: pretty;           /* geen losse slotwoorden op de laatste regel */
}
.hero-stats { display: flex; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.15); }
.hero-stat-n { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
/* .85: de achtergrond achter deze labels is door de verlooplagen lichter dan het
   effen #006600 waar ik eerst mee rekende, dus .75 haalde in de praktijk 4,17:1. */
.hero-stat-l { font-size: 12px; color: rgba(255,255,255,.85); margin-top: 3px; font-weight: 500; }
/* De kaart staat op een foto of op het groen, altijd in wit. Tekst die daar
   klein én halfdoorzichtig is, leest slecht: de maten hieronder zitten daarom
   dichter bij gewone bodytekst en de grijstinten zijn opgetrokken. */
.hero-event-card {
  background: rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--bs-border-radius-xl);
  padding: 1.75rem; color: #fff;
}
.hero-event-card .event-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.18); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px;
}
.hero-event-card .event-title {
  font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 26px); font-weight: 700;
  line-height: 1.2; margin-bottom: 10px;
}
.hero-event-card .event-meta {
  font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.hero-cap-meta { font-size: 13px; color: rgba(255,255,255,.8); }
.upcoming-list { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); }
.upcoming-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-bottom: 10px;
}
.upcoming-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.upcoming-date {
  width: 44px; height: 44px; border-radius: var(--bs-border-radius-sm); background: rgba(255,255,255,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
}
.upcoming-day { font-size: 16px; font-weight: 700; color: #fff; line-height: 1; }
.upcoming-mo  { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.7); text-transform: uppercase; }
.upcoming-name { font-size: 15px; color: rgba(255,255,255,.92); font-weight: 500; }
.upcoming-cat  { font-size: 12px; color: rgba(255,255,255,.7); }

/* ══ SECTION HEADERS ══ */
/* De marker vóór de eyebrow is het PSW-schild als vol vlak, gedeeld in sinopel
   en purper. Verving het streepje van 20x2, dat de standaardvorm uit elke
   UI-kit is en niets over PSW zei. Zie --psw-schild voor waarom er geen
   monogram of uitroepteken in staat.

   Als background-image en niet als mask, want de twee schildkleuren zitten in
   de SVG zelf. Data-URIs zijn toegelaten door csp.yaml (img-src bevat "data:"),
   en omdat het een achtergrond is en geen tekst staat er niets in de
   toegankelijkheidsboom. */
.section-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sinopel-nav); margin-bottom: 8px;
  display: flex; align-items: center; gap: 7px;
}
.section-eyebrow::before {
  content: '';
  flex: none; inline-size: 15px; block-size: 15px;
  background: var(--psw-schild) center / contain no-repeat;
}
.section-eyebrow.purple { color: var(--purper); }
.section-title { font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); font-weight: 800; color: #1A1A1A; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px; }
.section-title-sm { font-size: 24px; }
.section-sub   { font-size: 16px; color: #595959; line-height: 1.7; max-width: 540px; }

/* ══ PSW BADGES ══ */
.badge-psw-green  { background: var(--sinopel-light) !important; color: #003300 !important; }
.badge-psw-purple { background: var(--purper-light) !important; color: #19091D !important; }
.badge-psw-amber  { background: #FAEEDA !important; color: #633806 !important; }
.badge-psw-red    { background: #FDECEA !important; color: #7F1D1D !important; }

/* ══ CARDS ══ */
.event-card { border-radius: var(--bs-border-radius-xl) !important; border: 1px solid var(--cream-border) !important; transition: transform .2s, box-shadow .2s; }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; }
.event-card-header { padding: 16px 18px 14px; display: flex; justify-content: space-between; align-items: flex-start; background: var(--event-accent, var(--sinopel-nav)); }
.event-cat-tag     { color: rgba(255,255,255,.8); }   /* .65 gaf 3,97:1 op de accentkleur */
.event-card-date   { width: 42px; height: 48px; border-radius: var(--bs-border-radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.15); }
.event-card-day    { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; line-height: 1; }
.event-card-mo     { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.95); text-transform: uppercase; }  /* .8 gaf 3,94:1 op de accentkleuren */
.event-card-body   { padding: 0 18px 16px; }
.event-card-meta   { font-size: 13px; color: #6B6B6B; margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.event-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--cream); border-top: 1px solid var(--cream-border); margin-top: auto; }
.event-card-title  { font-size: 16px; font-weight: 700; line-height: 1.25; }
.event-card-teaser { font-size: 14px; color: #595959; line-height: 1.6; margin: 0; }
.event-cap-bar     { height: 4px; background: var(--cream-border); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.event-cap-fill    { height: 100%; border-radius: 2px; background: var(--event-accent, var(--sinopel-nav)); }
.event-cap-label   { font-size: 12px; color: #6B6B6B; margin-bottom: 6px; }
.event-cap-free    { font-size: 12px; color: #6B6B6B; }
.event-card-btn    {
  font-size: 12px; padding: 6px 14px;
  --bs-btn-bg:                 var(--event-accent, var(--sinopel-btn));
  --bs-btn-border-color:       var(--event-accent, var(--sinopel-btn));
  --bs-btn-hover-bg:           color-mix(in srgb, var(--event-accent, var(--sinopel-btn)) 82%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--event-accent, var(--sinopel-btn)) 82%, black);
  --bs-btn-active-bg:          color-mix(in srgb, var(--event-accent, var(--sinopel-btn)) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--event-accent, var(--sinopel-btn)) 75%, black);
}
/* Zelfde compacte knopmaat als .event-card-btn, maar zonder de accent-kleur-override:
   die botste met .btn-light (zwarte tekst op groene achtergrond, WCAG-contrastfout). */
.hero-event-card-btn { font-size: 14px; padding: 8px 20px; }
/* "Voeg toe aan agenda"-knoppen op de eventdetailpagina: geen category-accentkleur
   (neutrale hulpactie, geen hoofdactie), zelfde compacte maat als .nieuws-card-btn. */
.event-calendar-btn { font-size: 13px; padding: 6px 16px; }
.badge-psw-neutral { background: #EFEFED; color: #404040; }

/* ══ EVENT FILTER (sf_event_mgt) ══ */
.event-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.event-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px;
    background: #fff; border: 1px solid var(--cream-border); color: #595959;
    transition: all .15s;
}
.event-filter-btn:hover { border-color: var(--sinopel-nav); color: var(--sinopel-nav); }
.event-filter-btn.active { background: var(--sinopel-nav); border-color: var(--sinopel-nav); color: #fff; }

/* Categoriekleuren identiek aan catColors in List.fluid.html / Detail.fluid.html */
.event-filter-btn.filter-studentikoos:hover      { border-color: #006600; color: #006600; }
.event-filter-btn.filter-studentikoos.active     { background: #006600; border-color: #006600; color: #fff; }
.event-filter-btn.filter-studiegerelateerd:hover { border-color: #7B2D8B; color: #7B2D8B; }
.event-filter-btn.filter-studiegerelateerd.active { background: #7B2D8B; border-color: #7B2D8B; color: #fff; }
.event-filter-btn.filter-sportief:hover          { border-color: #92400E; color: #92400E; }
.event-filter-btn.filter-sportief.active         { background: #92400E; border-color: #92400E; color: #fff; }
.event-filter-btn.filter-cultureel:hover         { border-color: #0891B2; color: #0891B2; }
.event-filter-btn.filter-cultureel.active        { background: #0891B2; border-color: #0891B2; color: #fff; }

/* ══ EVENT DETAIL (sf_event_mgt) ══ */
.event-detail        { max-width: 1080px; }
.event-detail-header {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    background: var(--event-accent, var(--sinopel-nav));
    border-radius: var(--bs-border-radius-xl);
    padding: 28px 28px 24px; margin-bottom: 20px;
}
.event-detail-title  { font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 0; }
/* .event-detail-title staat normaal op de donkere .event-detail-header-achtergrond (wit contrasteert daar).
   Op de crème paginabodem (bv. inschrijvingsbevestiging) moet de tekst een donkere kleur krijgen,
   anders is ze door onvoldoende contrast quasi onleesbaar (accessibility fix). */
.event-registration-result .event-detail-title { color: var(--sinopel-nav); }
.event-detail-meta   {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    font-size: 14px; color: #595959; margin-bottom: 20px;
}
.event-detail-teaser { font-size: 17px; font-weight: 500; color: #404040; line-height: 1.65; margin-bottom: 16px; }
.event-detail-description { font-size: 16px; line-height: 1.7; color: #404040; }
.event-detail-subtitle { font-size: 20px; font-weight: 800; margin: 24px 0 10px; }
.event-detail-back   { margin-top: 28px; }
.event-detail-image  { display: block; width: 100%; height: auto; border-radius: var(--bs-border-radius-xl); margin-bottom: 20px; }
.event-top-badge     { display: inline-block; margin-left: 10px; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.event-detail-extlink { margin-top: 20px; }
.event-detail-extlink a { font-size: 14px; font-weight: 600; color: var(--sinopel-nav); }
.event-detail-extlink a:hover { text-decoration: underline; }
.event-detail-maplink { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--sinopel-nav); }
.event-detail-maplink:hover { text-decoration: underline; }
.event-detail-maplink .bi { font-size: 11px; }

/* pijler-card (legacy, behouden voor compatibiliteit) */
.pijler-card   { border-radius: var(--bs-border-radius-xl) !important; border: 1px solid var(--cream-border) !important; padding: 1.75rem; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; height: 100%; display: flex; flex-direction: column; }
.pijler-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,.09) !important; }
.pijler-icon   { width: 48px; height: 48px; border-radius: var(--bs-border-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.pijler-title  { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.pijler-desc   { font-size: 14px; color: #595959; line-height: 1.65; margin-bottom: 14px; flex-grow: 1; }
.pijler-count  { font-size: 12px; font-weight: 600; color: #B9B9B5; display: flex; align-items: center; gap: 5px; margin-top: auto; }
.pijler-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0; }

/* pijler photo-card — magazine layout */
.pijler-photo-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--cream-deep);
    cursor: pointer;
}
.pijler-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.pijler-photo-card:hover .pijler-photo { transform: scale(1.05); }
.pijler-photo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    background: var(--pijler-bg);
    color: var(--pijler-icon);
}
.pijler-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pijler-grad, rgba(0,0,0,.8)) 0%, rgba(0,0,0,.08) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 20px;
    color: #fff;
}
.pijler-photo-icon {
    font-size: 30px;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    line-height: 1;
}
.pijler-photo-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.pijler-photo-desc {
    font-size: 13.5px;
    line-height: 1.55;
    opacity: .88;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.pijler-photo-count {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .75;
}
@media (max-width: 575px) {
    .pijler-photo-card { aspect-ratio: 4 / 3; }
}

.studie-item  { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: #fff; border-radius: var(--bs-border-radius-xl); border: 1px solid var(--cream-border); transition: all .2s; height: 100%; }
.studie-item:hover { border-color: var(--purper-light); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.studie-icon  { width: 44px; height: 44px; border-radius: var(--bs-border-radius-lg); background: var(--purper-pale); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.studie-icon.purple { background: var(--purper-pale); }
.studie-body  { display: flex; flex-direction: column; flex: 1; }
.studie-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.studie-desc  { font-size: 14px; color: #595959; line-height: 1.6; flex-grow: 1; }
.studie-link  { font-size: 13px; font-weight: 600; color: var(--purper-nav); text-decoration: none; margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; }
.studie-link:hover { text-decoration: underline; }

.bestuur-card { background: var(--cream); border-radius: var(--bs-border-radius-xl); border: 1px solid var(--cream-border); padding: 1.25rem; text-align: center; transition: all .2s; }
.bestuur-card:hover { transform: translateY(-3px); border-color: var(--sinopel-light); }
.bestuur-av   { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.bestuur-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.bestuur-role { font-size: 12px; color: #6B6B6B; }

.nieuws-card  { border-radius: var(--bs-border-radius-xl) !important; border: 1px solid var(--cream-border) !important; transition: all .2s; height: 100%; }
.nieuws-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,.09) !important; }
.nieuws-img   { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; overflow: hidden; }
.nieuws-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.3)); }
.nieuws-body  { padding: 16px 18px; }
.nieuws-meta  { font-size: 12px; color: #B9B9B5; margin-bottom: 8px; font-weight: 500; }
.nieuws-cat-badge { font-size: 11px; }
.nieuws-card-btn  { font-size: 13px; padding: 6px 16px; }
.nieuws-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.01em; line-height: 1.3; }
.nieuws-excerpt { font-size: 14px; color: #595959; line-height: 1.6; }

/* ══ TIMELINE ══ */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 0; width: 2px; background: linear-gradient(var(--sinopel-light), transparent); }
.timeline-item { position: relative; margin-bottom: 24px; }
.timeline-dot  { position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sinopel-nav); border: 2px solid var(--cream-deep); box-shadow: 0 0 0 2px var(--sinopel-light); }
.timeline-year { font-size: 12px; font-weight: 700; color: var(--sinopel-nav); margin-bottom: 2px; }
.timeline-text { font-size: 14px; color: #595959; line-height: 1.55; }

/* ══ LID WORDEN ══ */
.lid-worden-section { background: linear-gradient(135deg, var(--sinopel-dark) 0%, var(--sinopel-nav) 50%, #1a4020 100%); padding: 80px 0; position: relative; overflow: hidden; }
.lid-worden-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 20%, rgba(123,45,139,.3) 0%, transparent 50%); }
.lid-stap       { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--bs-border-radius-xl); padding: 20px; text-align: center; height: 100%; }
.lid-stap-num   { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.lid-worden-intro { font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.7; }
.lid-stat       { text-align: left; padding: 12px 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--bs-border-radius-lg); }
.lid-stat-label { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 2px; }
.lid-stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.lid-stap-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.lid-stap-sub   { font-size: 13px; color: rgba(255,255,255,.75); }

/* Twee routes naar een lidmaatschap: WeTicket gevuld en primair, de
   overschrijving eronder als outline-knop of als discrete tekstlink. */
.lid-routes       { text-align: center; }
.lid-route-alt    { margin-top: 22px; }

/* Vanaf lg staan de twee inschrijfroutes naast elkaar: het zijn gelijkwaardige
   keuzes, geen stappen na elkaar. Enkel wanneer de tweede route een knop is —
   staat ze als tekstlink ingesteld, dan hoort ze ondergeschikt te blijven en
   dus onder de hoofdknop.
   auto-fit vangt op dat er soms maar één route is: dan blijft het één kolom
   over de volle breedte in plaats van een halve, uitgelijnd naar links. */
@media (min-width: 992px) {
  .lid-routes:is(:has(> .lid-route-alt-knop), :has(> .lid-route-alt-primair)) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    align-items: start;
  }
  .lid-routes:is(:has(> .lid-route-alt-knop), :has(> .lid-route-alt-primair)) > .lid-route-alt {
    margin-top: 0;
  }
}
.lid-route-alt-link { margin-top: 14px; }
.lid-route-note   { font-size: 13px; color: rgba(255,255,255,.8); margin: 10px 0 0; }
.lid-route-link   { color: rgba(255,255,255,.85); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.lid-route-link:hover, .lid-route-link:focus-visible { color: #fff; }
.lid-meer         { text-align: center; margin: 30px 0 0; }
.lid-meer-link    { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }
.lid-meer-link:hover, .lid-meer-link:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ══ PARTNERS ══ */
.partner-logo { background: #fff; border: 1px solid var(--cream-border); border-radius: var(--bs-border-radius-lg); height: 72px; display: flex; align-items: center; justify-content: center; padding: 0 20px; font-size: 15px; font-weight: 700; color: #B9B9B5; transition: all .2s; }
.partner-logo:hover { border-color: var(--sinopel-light); color: var(--sinopel-nav); }

/* ══ KALENDER ══ */
.kalender-widget { background: #fff; border-radius: var(--bs-border-radius-xl); border: 1px solid var(--cream-border); overflow: hidden; margin-bottom: 2rem; }
.kalender-header { background: var(--sinopel-nav); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.kalender-header .month { font-size: 17px; font-weight: 700; color: #fff; }
.kalender-body { padding: 0; }
.kal-row       { display: grid; grid-template-columns: repeat(7, 1fr); }
.kal-row.kal-row-names { background: var(--cream); border-bottom: 1px solid var(--cream-border); }
.kal-day-name  { font-size: 11px; font-weight: 700; text-align: center; color: #6B6B6B; letter-spacing: .04em; padding: 8px 0; text-transform: uppercase; }
.kal-day       {
  height: 128px;
  padding: 8px;
  border-right: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  transition: background .1s;
}
.kal-row .kal-day:nth-child(7n) { border-right: none; }
.kal-day:hover { background: var(--sinopel-pale); }
.kal-day.muted { background: var(--cream); }
.kal-day-num { font-size: 13px; font-weight: 600; color: var(--ink, #1A1A1A); }
/* Dagen buiten de getoonde maand. Ze mogen zachter ogen, maar 1,84:1 was
   onleesbaar; #6B6B6B haalt 4,99:1 en blijft duidelijk secundair. */
.kal-day.muted .kal-day-num { color: #6B6B6B; }
.kal-day-num.has-event { color: var(--sinopel-nav); font-weight: 700; }
.kal-day-num.today { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sinopel-nav); color: #fff !important; }
.kal-event-pill {
  display: block;
  background: var(--sinopel-light);
  color: #003300;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kal-event-pill:hover { background: var(--sinopel-nav); color: #fff; }
.kal-event-time { font-size: 10px; color: #6B6B6B; margin-top: -2px; }
.kal-event-more { display: block; font-size: 10.5px; color: #6B6B6B; font-weight: 600; text-decoration: none; }
.kal-event-more:hover { color: var(--sinopel-nav); text-decoration: underline; }
.kal-nav-btn { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; transition: color .15s; }
.kal-nav-btn:hover { color: #fff; }
@media (max-width: 767.98px) {
  .kal-day { height: 44px; padding: 4px; }
  .kal-event-pill, .kal-event-time, .kal-event-more { display: none; }
  .kal-day-num.has-event::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--sinopel-nav); margin: 3px auto 0; }
}

/* ══ FOOTER ══ */
.psw-footer     { background: var(--sinopel-dark); color: rgba(255,255,255,.75); padding: 56px 0 0; }
.footer-logo    { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-logo .psw-logo       { width: 45px; height: 45px; }
.footer-logo .psw-brand-name { font-size: 15px; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.6; max-width: 260px; }
/* Zelfde schildmarker als de eyebrows. De footer staat op --sinopel-dark, dus
   hier de omgekeerde opbouw voor groene vlakken; zie --psw-schild-donker.
   15px zoals bij .section-eyebrow, want de tekst is hier ook 11px. */
.footer-heading {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
}
.footer-heading::before {
  content: '';
  flex: none; inline-size: 15px; block-size: 15px;
  background: var(--psw-schild-donker) center / contain no-repeat;
}
.footer-link    { display: block; font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 8px; transition: color .15s; }
.footer-link:hover { color: #fff; }
.footer-social  { display: flex; gap: 8px; margin-top: 16px; }
@media (max-width: 991.98px) {
  .footer-branding { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer-branding .footer-tagline { margin-left: auto; margin-right: auto; }
  .footer-branding .footer-social { justify-content: center; }
}
.social-btn     { width: 34px; height: 34px; border-radius: var(--bs-border-radius); background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(255,255,255,.7); transition: all .15s; }
.social-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.footer-bottom  { margin-top: 48px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom-text { font-size: 13px; color: rgba(255,255,255,.7); }
/* Zelfde stijl als de links in .footer-privacy: dezelfde grootte, dezelfde
   gedempte kleur, niet vet en niet onderstreept. De link erft de kleur van de
   regel, zodat hij bij een wijziging daar niet uit de pas loopt.

   Daarmee is de link in rust visueel niet van de omringende tekst te
   onderscheiden. Dat is een bewuste keuze en geen schending van WCAG 1.4.1:
   die eist dat kleur niet het énige onderscheid is, en hier wordt kleur
   helemaal niet als onderscheid ingezet. De footer voert die gedempte
   linkstijl trouwens al, de juridische links ernaast zien er net zo uit.

   Onderstreping bij hover en toetsenbordfocus, zodat de link bij interactie
   wel als link herkenbaar wordt. */
.footer-bottom-text a { color: inherit; text-decoration: none; }
.footer-bottom-text a:hover,
.footer-bottom-text a:focus-visible { text-decoration: underline; }
.footer-newsletter-form .required   { display: none; }
.footer-newsletter-form .form-actions { margin-top: 10px; }
.footer-newsletter-form input.form-control {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  box-shadow: none;
}
.footer-newsletter-form input.form-control::placeholder {
  color: rgba(255,255,255,.55);
}
.footer-newsletter-form input.form-control:focus {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  color: #fff;
  box-shadow: none;
}
/* flex-wrap: op 320px paste deze rij niet en duwde ze de hele pagina 189px
   breder dan het scherm (WCAG 1.4.10 Reflow). row-gap houdt de regels uit
   elkaar zodra ze afbreken. */
.footer-privacy { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* Bootstrap-valkuil: .g-5 zet --bs-gutter-x op 3rem, dus -24px marge links én
   rechts, terwijl .container maar 12px padding meebrengt. Op brede schermen
   verdwijnt dat verschil in de zijmarge, op 320px duwt het de pagina 12px te
   breed en ontstaat een horizontale schuifbalk (WCAG 1.4.10 Reflow).
   Onder sm valt de gutter daarom terug op de standaard 1,5rem. */
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* Lange Nederlandse samenstellingen ("Toegankelijkheidsverklaring") passen op
   320px niet in één regel. Zonder afbreekmogelijkheid duwen ze de pagina breder
   dan het scherm, wat WCAG 1.4.10 Reflow overtreedt. De <html> draagt lang="nl-BE",
   dus hyphens: auto breekt op de juiste plek af; break-word is de terugval voor
   browsers zonder Nederlandse afbreekregels. */
.frame :is(h1, h2, h3, h4, p, li),
.hero-title, .section-title {
  overflow-wrap: break-word;
  hyphens: auto;
}
.footer-privacy a,
.footer-privacy button { font-size: 13px; color: rgba(255,255,255,.7); transition: color .15s; background: none; border: none; padding: 0; cursor: pointer; }
.footer-privacy a:hover,
.footer-privacy button:hover { color: rgba(255,255,255,.7); }

/* ══ COOKIEBANNER ══ */
.cookie-banner {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    max-width: 520px; width: calc(100% - 32px);
    background: var(--sinopel-dark); border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--bs-border-radius-xl); padding: 16px 20px; z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.cookie-banner-body   { display: flex; align-items: flex-start; gap: 12px; }
.cookie-banner-icon   { color: #fff; font-size: 22px; flex-shrink: 0; }
.cookie-banner-title  { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.cookie-banner-text   { font-size: 12px; color: rgba(255,255,255,.65); }
.cookie-banner-link   { color: rgba(255,255,255,.85); }
.cookie-banner-link:hover { color: #fff; }
.cookie-banner-panel  { margin: 12px 0 0 34px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.cookie-banner-panel .form-check-label { font-size: 12px; color: rgba(255,255,255,.85); }
.cookie-banner-option-text { display: block; color: rgba(255,255,255,.55); }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.cookie-btn-ghost { background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 12px; }
.cookie-btn-ghost:hover { background: rgba(255,255,255,.28); color: #fff; }
.cookie-btn-solid { background: #fff; color: var(--sinopel-dark); border: none; font-size: 12px; }
.cookie-btn-solid:hover { background: rgba(255,255,255,.85); color: var(--sinopel-dark); }

/* ══ PARTNERS ══ */
.partner-logo {
    background: var(--cream-deep);
    border: 1px solid var(--cream-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: 16px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    transition: box-shadow .15s, border-color .15s;
    overflow: hidden;
}
.partner-logo:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #d0d0c8; }
.partner-logo-img {
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.partner-logo-placeholder {
    font-size: 12px;
    font-weight: 600;
    color: #5F5F5A;
    text-align: center;
    line-height: 1.3;
    padding: 0 8px;
}
.partner-logo-dummy {
    border-style: dashed;
    pointer-events: none;
}

/* ══ SPONSORING ══ */
.sponsoring-groep-titel { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--sinopel-nav); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.sponsoring-groep-titel::after { content: ''; flex: 1; height: 1px; background: var(--sinopel-nav); opacity: .25; }
.sponsoring-card { border-radius: var(--bs-border-radius-lg); padding: 24px 18px; display: flex; flex-direction: column; background: var(--sp-bg); color: var(--sp-color); }
.sponsoring-card-icon { font-size: 24px; margin-bottom: 10px; color: var(--sp-icon); }
.sponsoring-card-naam { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.sponsoring-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; border-radius: 20px; padding: 2px 10px; margin-bottom: 12px; background: var(--sp-badge-bg); }
.sponsoring-desc { font-size: 14px; line-height: 1.5; margin-bottom: 12px; opacity: .95; }  /* .8 gaf 3,87:1 */
.sponsoring-voordelen { list-style: none; padding: 0; margin: 0; margin-top: auto; font-size: 13px; display: flex; flex-direction: column; gap: 5px; opacity: .95; }  /* .85 gaf 4,28:1 */
.sponsoring-voordelen li::before { content: '✓ '; font-weight: 800; }
.sponsoring-type-card { background: #fff; border-radius: var(--bs-border-radius-lg); padding: 20px; border: 1px solid #e8e4dc; display: flex; flex-direction: column; }
.sponsoring-type-card .sponsoring-tags { margin-top: auto; padding-top: 12px; justify-content: center; }
.sponsoring-type-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: var(--sp-icon-bg); color: var(--sp-icon); }
.sponsoring-keyword { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 4px 12px; margin-bottom: 10px; letter-spacing: .04em; text-transform: uppercase; background: var(--sp-icon-bg); color: var(--sp-icon); }
.sponsoring-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sponsoring-tag { font-size: 11px; background: var(--cream-deep); border-radius: 20px; padding: 2px 8px; color: #555; }

/* ══ LAYOUT ACHTERGRONDEN ══ */
/* Twee bronnen, dezelfde achtergronden. De content blocks zetten layout-bg-N
   zelf in hun markup; fluid_styled_content zet frame-layout-N op de wrapper van
   een standaard content-element. Door ze samen te nemen werkt het veld
   "Layout" overal hetzelfde, ook op tekst-, beeld- en textmedia-elementen. */
.layout-bg-1, .frame-layout-1 { background: var(--cream); }
.layout-bg-2, .frame-layout-2 { background: #fff; }
.layout-bg-3, .frame-layout-3 { background: var(--sinopel-dark); color: #fff; }
.layout-bg-3 .section-title,
.layout-bg-3 .section-subtitle,
.frame-layout-3 .section-title,
.frame-layout-3 .section-subtitle { color: #fff; }

/* Een achtergrond zonder ruimte eromheen plakt tegen de tekst. De content
   blocks lossen dat op met py-5 in hun markup; standaard-elementen hebben geen
   plek om zo'n klasse te zetten, dus die padding komt hier.
   frame-layout-0 is "geen achtergrond" en krijgt dus niets. */
:is(.frame-layout-1, .frame-layout-2, .frame-layout-3) { padding-top: 3rem; padding-bottom: 3rem; }

/* "Geen frame" hoort over de volle breedte te lopen. Het paginasjabloon zet
   echter een gecentreerde .container om alle content, dus alleen
   container-fluid binnenin volstaat niet: de sectie moet uit die container
   breken. De negatieve marges rekken haar tot de vensterbreedte.
   overflow-x: clip op <main> vangt de rekenfout van 100vw op, dat is namelijk
   inclusief de schuifbalk; zonder dat zou er een horizontale schuifbalk
   ontstaan (WCAG 1.4.10). clip en niet hidden, want hidden breekt sticky. */
main { overflow-x: clip; }

/* Opent een pagina met een sectie over de volle breedte, dan zou de py-5 van
   het paginasjabloon daarboven een strook paginakleur laten zien. Die valt weg.
   !important is nodig omdat Bootstrap's spacing-utilities dat zelf ook
   gebruiken; zonder wint .py-5. */
.container.py-5:has(> .frame-none:first-child) { padding-top: 0 !important; }

/* Een beeld over de volle breedte hoort de rand te raken. Ronding zegt "los
   object", terwijl een volle-breedtesectie juist het tegenovergestelde wil
   zeggen, en 16px op een beeld van 1250px leest sowieso niet als keuze. */
.frame-none > .container-fluid { padding-left: 0; padding-right: 0; }
/* Drie klassen diep, want de bestaande regel .ce-textpic.ce-center
   .image-embed-item weegt even zwaar; met minder gewicht wint die en blijft de
   ronding staan. */
.frame-none .ce-gallery :is(.image-embed-item, img) { border-radius: 0; }
.container > .frame-none {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Staan twee gekleurde vlakken onder elkaar, dan hoort de marge ertussen weg:
   anders zie je een streep pagina-achtergrond tussen twee cream-blokken. */
:is(.frame-layout-1, .frame-layout-2, .frame-layout-3) + :is(.frame-layout-1, .frame-layout-2, .frame-layout-3) {
  margin-top: 0;
}

/* Op de donkere variant moeten ook de gewone tekst en links meekleuren. */
.frame-layout-3 :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd) { color: #fff; }
.frame-layout-3 .frame-type-text a { color: var(--sinopel-light); }

/* ══ PSW INTRO ══ */
.psw-intro-body {
  font-size: 1.125rem;
  color: #444;
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}
.psw-intro-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
}
.psw-intro-stat {
  text-align: center;
}
.psw-intro-stat-n {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--sinopel-nav);
  line-height: 1.1;
}
.psw-intro-stat-l {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6B6B6B;   /* #888 haalde 3,54:1 op wit */
  margin-top: 2px;
}
@media (max-width: 576px) {
  .psw-intro-stats { gap: 20px; }
  .psw-intro-stat-n { font-size: 1.75rem; }
}

/* ══ PRAESIDIUM FLIP CARDS ══ */
.praesidium-grid { perspective: 1200px; }

.praesidium-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    aspect-ratio: 3 / 4;
    border-radius: var(--bs-border-radius-lg);
    cursor: pointer;
}

/* desktop: hover om te flippen */
@media (hover: hover) {
    .praesidium-card:hover { transform: rotateY(180deg); }
}
/* touch: klik om te flippen */
.praesidium-card.is-flipped { transform: rotateY(180deg); }
/* toetsenbord: valt de focus op een link op de achterkant, dan draait de kaart
   mee. Zonder dit stond die link weggedraaid terwijl hij wél focus kon krijgen,
   en zag een toetsenbordgebruiker zijn focus verdwijnen. */
.praesidium-card:focus-within { transform: rotateY(180deg); }

.praesidium-front,
.praesidium-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

/* ── FRONT ── */
.praesidium-front { background: var(--cream-deep); }

.praesidium-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.praesidium-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-deep);
    font-size: 64px;
    color: #ccc;
}

.praesidium-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    color: #fff;
}

/* ── BACK ── */
.praesidium-back {
    transform: rotateY(180deg);
    background: var(--sinopel-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.praesidium-back-header { margin-bottom: 10px; }

.praesidium-naam {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.praesidium-functie-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .75;
    margin-top: 3px;
}

.praesidium-bio {
    font-size: 13.5px;
    line-height: 1.6;
    opacity: .9;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.praesidium-links {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.15);
}

.praesidium-link {
    color: #fff;
    font-size: 18px;
    opacity: .8;
    transition: opacity .15s;
    line-height: 1;
}

.praesidium-link:hover { opacity: 1; color: #fff; }
/* De links waren de enige bedienbare elementen zonder eigen focusring. Wit op
   --sinopel-dark haalt ruim de 3:1 die WCAG 1.4.11 voor een focusindicator vraagt. */
.praesidium-link:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ══ ANIMATIES ══ */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
.hero-content { animation: fadeUp .6s ease both; }
.hero-card    { animation: fadeUp .6s ease .2s both; }

@media (max-width: 768px) {
  .psw-navbar .nav-link { padding: 14px 8px !important; font-size: 13px; }
  .hero-stats { gap: 20px; }
  .hero-stat-n { font-size: 22px; }
  .mega-menu { min-width: unset; }
}

/* ══ PSW CAROUSEL ══ */
.psw-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.psw-carousel-nav {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.psw-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.psw-carousel-track::-webkit-scrollbar { display: none; }
.psw-carousel-slide {
    flex: 0 0 calc(33.333% - 1rem);
    scroll-snap-align: start;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.psw-carousel-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    display: block;
}
.psw-carousel-zoom-link { display: block; }
.psw-carousel-card-body {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.psw-carousel-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.psw-carousel-card-text {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}
.psw-carousel-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: var(--sinopel-nav);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    font-size: 1rem;
}
.psw-carousel-btn:hover { opacity: 0.8; }
@media (max-width: 991px) {
    .psw-carousel-slide { flex: 0 0 calc(50% - 0.75rem); }
}
@media (max-width: 575px) {
    .psw-carousel-slide { flex: 0 0 100%; }
}

/* ── PSW Testimonial ─────────────────────────────────────────── */
.testimonial-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.testimonial-accent {
    height: 5px;
    background: var(--tm-accent);
}
.testimonial-body {
    padding: 28px 24px 16px;
    flex: 1;
}
.testimonial-quote-mark {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: -12px;
    font-family: Georgia, serif;
    font-weight: 700;
    color: var(--tm-accent);
}
.testimonial-quote {
    font-size: 1rem;
    line-height: 1.65;
    color: #333;
    margin: 0;
}
.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px 22px;
    margin-top: auto;
}
.testimonial-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.testimonial-photo-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    background: var(--tm-bg);
    color: var(--tm-accent);
}
.testimonial-meta {
    min-width: 0;
}
.testimonial-naam {
    font-weight: 700;
    font-size: .95rem;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.testimonial-richting-badge {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 4px;
    white-space: nowrap;
    background: var(--tm-bg);
    color: var(--tm-accent);
}

/* ── PSW FAQ ─────────────────────────────────────────────────── */
.psw-faq-accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: 10px;
    --bs-accordion-inner-border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.psw-faq-item {
    border: 1px solid #e4e4e4 !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.psw-faq-btn {
    font-weight: 600;
    font-size: 1rem;
    color: #111;
    background: #fff;
    padding: 18px 20px;
    box-shadow: none !important;
}
.psw-faq-btn:not(.collapsed) {
    color: var(--sinopel-nav);
    background: var(--sinopel-pale);
    border-bottom: 1px solid #d4ecd4;
}
.psw-faq-btn::after {
    filter: none;
}
.psw-faq-btn:not(.collapsed)::after {
    filter: invert(22%) sepia(96%) saturate(500%) hue-rotate(90deg);
}
.psw-faq-body {
    padding: 18px 20px;
    font-size: 1rem;
    color: #444;
    line-height: 1.7;
}
.psw-faq-body p:last-child {
    margin-bottom: 0;
}

/* ── PSW Accordeon (generiek) ───────────────────────────────────── */
.psw-accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: 10px;
    --bs-accordion-inner-border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.psw-accordion-item {
    border: 1px solid #e4e4e4 !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.psw-accordion-btn {
    font-weight: 600;
    font-size: 1rem;
    color: #111;
    background: #fff;
    padding: 18px 20px;
    box-shadow: none !important;
}
.psw-accordion-btn:not(.collapsed) {
    color: var(--sinopel-nav);
    background: var(--sinopel-pale);
    border-bottom: 1px solid #d4ecd4;
}
.psw-accordion-btn::after {
    filter: none;
}
.psw-accordion-btn:not(.collapsed)::after {
    filter: invert(22%) sepia(96%) saturate(500%) hue-rotate(90deg);
}
.psw-accordion-body {
    padding: 18px 20px;
    font-size: 1rem;
    color: #444;
    line-height: 1.7;
}
.psw-accordion-body p:last-child {
    margin-bottom: 0;
}
.psw-accordion-body a:not(.btn),
.psw-faq-body a:not(.btn),
.section-sub a:not(.btn),
.ce-bodytext a:not(.btn) {
    color: var(--sinopel-nav);
    text-decoration: underline;
    text-decoration-color: rgba(0,102,0,.4);
    text-underline-offset: 2px;
    font-weight: 600;
    transition: text-decoration-color .15s;
}
.psw-accordion-body a:not(.btn):hover,
.psw-faq-body a:not(.btn):hover,
.section-sub a:not(.btn):hover,
.ce-bodytext a:not(.btn):hover {
    text-decoration-color: var(--sinopel-nav);
}

/* ══ ZOEKRESULTATEN (EXT:indexed_search, content-gedeelte) ══ */
.tx-indexedsearch-searchbox .tx-indexedsearch-hidden-fields { display: none; }
.tx-indexedsearch-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 520px;
  margin-bottom: 24px;
}
.tx-indexedsearch-searchbox-sword {
  flex: 1 1 auto;
}
.tx-indexedsearch-searchbox-button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 0;
}
.tx-indexedsearch-info-sword { margin-bottom: 6px; color: #444; }
.tx-indexedsearch-browsebox { margin-bottom: 24px; }
.tx-indexedsearch-res {
  padding: 20px 0;
  border-bottom: 1px solid var(--cream-border);
}
.tx-indexedsearch-res:first-of-type { border-top: 1px solid var(--cream-border); }
.tx-indexedsearch-res .tx-indexedsearch-title { font-weight: 700; font-size: 1.05rem; }
.tx-indexedsearch-res .tx-indexedsearch-description { color: #555; margin-top: 6px; margin-bottom: 0; line-height: 1.6; }

/* ══ INSTAGRAM REEL (privacyveilige link, geen Meta-scripts) ══ */
.ig-reel-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--cream-border);
  border-radius: var(--bs-border-radius-xl); overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s;
}
.ig-reel-card:hover, .ig-reel-card:focus-visible {
  transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); color: inherit;
}
.ig-reel-card:focus-visible { outline: 3px solid var(--sinopel-nav); outline-offset: 2px; }
.ig-reel-media { position: relative; aspect-ratio: 4 / 5; background: var(--cream-deep); }
.ig-reel-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-reel-img-placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 64px; color: #fff;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.ig-reel-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34px; transition: background .2s;
}
.ig-reel-card:hover .ig-reel-play { background: rgba(0,0,0,.65); }
.ig-reel-badge {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
}
.ig-reel-body { padding: 18px 20px 20px; }
.ig-reel-title { font-size: 1.15rem; font-weight: 700; color: var(--sinopel-nav); margin-bottom: 6px; }
.ig-reel-caption { color: #555; line-height: 1.6; margin-bottom: 14px; }
.ig-reel-cta {
  display: inline-flex; align-items: center; font-weight: 600; color: var(--sinopel-nav);
}

/* ══ FRONTEND-LOGIN (EXT:felogin) ══ */
/* Gebruikt voor de afgeschermde redacteurshandleiding. De standaardmarkup van
   felogin heeft geen eigen wrapper-klasse en geen Bootstrap-klassen; het enige
   stabiele aanknopingspunt is de frame-klasse van fluid_styled_content. Ze zet
   bovendien drie koppen boven elkaar: de kop van het content-element, een eigen
   h3 en een legend. We houden er één over. */

.frame-type-felogin_login > .container {
  max-width: 27rem;
}

/* De kop van het content-element blijft; de twee eigen koppen van felogin
   verdwijnen. De legend blijft leesbaar voor schermlezers. */
.frame-type-felogin_login h3 { display: none; }
.frame-type-felogin_login legend {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.frame-type-felogin_login header h2 {
  margin-bottom: .5rem;
}

.frame-type-felogin_login > .container > p {
  color: var(--bs-secondary-color, #595959);
  font-size: .9375rem;
  margin-bottom: 1.25rem;
}

.frame-type-felogin_login fieldset {
  border: 1px solid var(--cream-border);
  border-radius: .75rem;
  background: #fff;
  padding: 1.75rem;
  margin: 0;
}

.frame-type-felogin_login label {
  display: block;
  font-weight: 600;
  font-size: .875rem;
  margin-bottom: .35rem;
}

.frame-type-felogin_login input[type="text"],
.frame-type-felogin_login input[type="password"] {
  width: 100%;
  padding: .6rem .8rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--cream-border);
  border-radius: .5rem;
  background: var(--cream);
  font: inherit;
  color: inherit;
}

.frame-type-felogin_login input[type="text"]:focus,
.frame-type-felogin_login input[type="password"]:focus {
  outline: none;
  border-color: var(--sinopel-nav);
  box-shadow: 0 0 0 3px var(--sinopel-pale);
  background: #fff;
}

.frame-type-felogin_login input[type="submit"] {
  width: 100%;
  padding: .65rem 1.25rem;
  border: 1px solid var(--sinopel-btn);
  border-radius: 50rem;
  background: var(--sinopel-btn);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: background-color .15s ease;
}

.frame-type-felogin_login input[type="submit"]:hover,
.frame-type-felogin_login input[type="submit"]:focus-visible {
  background: var(--sinopel-dark);
  border-color: var(--sinopel-dark);
}

/* Melding bij een verkeerd wachtwoord, in dezelfde stijl als de blockquotes. */
.frame-type-felogin_login .alert,
.frame-type-felogin_login [role="alert"] {
  border: 1px solid #F0DFA6;
  border-left: 4px solid #C99A1E;
  background: #FFF8E6;
  border-radius: .5rem;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .9375rem;
}

/* ══ HANDLEIDING (afgeschermde subsite) ══ */
/* Zie Resources/Private/PageView/Pages/Handleiding.fluid.html. Elke pagina heeft één
   textmedia-element dat de redacteur zelf in de backend bijwerkt — de backend is de
   enige bron. De opmaak hangt daarom aan de elementtypes zelf (h2, table, code, img)
   en niet aan klassen die een redacteur zou moeten zetten; het RTE-profiel
   psw26_handleiding laat alleen die elementen toe.

   De scope is .psw-hl-inhoud-col, de kolom uit het paginatemplate. Vroeger was dat een
   div.psw-hl-inhoud binnen de bodytext zelf, maar zo'n wrapper overleeft geen opslagronde
   in CKEditor. Opmaak hoort in het template, niet in de content. */

/* .psw-navbar heeft wél position:sticky (regel 245), maar plakt in de praktijk
   niet: <header> is niet hoger dan de navbar zelf, en een sticky element kan
   alleen binnen zijn eigen ouder blijven hangen. Er hoeft dus geen ruimte voor
   gereserveerd te worden. Wordt die navbar ooit echt plakkend gemaakt, dan is
   --hl-navbar de enige plek die mee moet: zowel de zijbalk als de ankersprongen
   rekenen ermee, zodat die twee niet uit elkaar kunnen lopen. */
.psw-handleiding-wrap {
  --hl-navbar: 0rem;
  --hl-lucht: 1.5rem;
}

/* ── Zijbalk ─────────────────────────────────────────────────────────────── */

.psw-hl-nav {
  position: sticky;
  top: calc(var(--hl-navbar) + var(--hl-lucht));
  max-height: calc(100vh - var(--hl-navbar) - var(--hl-lucht) * 2);
  overflow-y: auto;
  padding: 1.25rem;
  border: 1px solid var(--cream-border);
  border-radius: .75rem;
  background: #fff;
  font-size: .9375rem;
}

.psw-hl-nav-titel a {
  color: inherit;
  text-decoration: none;
}
.psw-hl-nav-titel a:hover { text-decoration: underline; }

.psw-hl-nav-titel {
  margin: 0 0 .75rem;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sinopel-nav);
}

.psw-hl-nav-lijst,
.psw-hl-nav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.psw-hl-nav-sub {
  margin: .25rem 0 .5rem .5rem;
  padding-left: .75rem;
  border-left: 2px solid var(--cream-border);
  font-size: .875rem;
}

.psw-hl-nav-link {
  display: block;
  padding: .35rem .5rem;
  border-radius: .375rem;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.psw-hl-nav-link:hover,
.psw-hl-nav-link:focus-visible {
  background: var(--sinopel-pale);
  color: var(--sinopel-dark);
}

.psw-hl-nav-link.is-huidig {
  background: var(--sinopel-nav);
  color: #fff;
  font-weight: 600;
}

.psw-hl-nav-lijst > li.is-actief > .psw-hl-nav-link:not(.is-huidig) {
  font-weight: 700;
  color: var(--sinopel-dark);
}

/* Op mobiel plakt de zijbalk niet: dan staat ze gewoon boven de inhoud. */
@media (max-width: 991.98px) {
  .psw-hl-nav { position: static; max-height: none; }
}

/* ── Inhoud ──────────────────────────────────────────────────────────────── */

/* Ankersprongen mogen niet onder de sticky navbar landen. */
.psw-hl-inhoud-col :is(h2, h3, h4, h5) { scroll-margin-top: calc(var(--hl-navbar) + var(--hl-lucht)); }

.psw-hl-inhoud-col h2 {
  margin: 2.25rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--cream-border);
  color: var(--sinopel-nav);
}
.psw-hl-inhoud-col h2:first-child { margin-top: 0; }
.psw-hl-inhoud-col h3 { margin: 1.75rem 0 .5rem; }
.psw-hl-inhoud-col h4 { margin: 1.25rem 0 .4rem; font-size: 1rem; }

/* Leesbare regellengte, ook als de zijbalk wegvalt. Het kind-teken moet blijven,
   anders krimpen ook de cellen in de tabellen; .ce-bodytext is de div die
   fluid_styled_content om de bodytext van een textmedia-element zet. */
.psw-hl-inhoud-col .ce-bodytext > :is(p, ul, ol, blockquote) { max-width: 44rem; }

/* CKEditor 5 verpakt elke tabel in <figure class="table">. Die wrapper krijgt de
   marge en het horizontale scrollen, zodat een brede veldtabel op een telefoon de
   pagina niet oprekt (WCAG 1.4.10 reflow). */
.psw-hl-inhoud-col figure.table {
  margin: 0 0 1.25rem;
  overflow-x: auto;
}
.psw-hl-inhoud-col figure.table > table { margin-bottom: 0; }

.psw-hl-inhoud-col table {
  width: 100%;
  margin-bottom: 1.25rem;
  border-collapse: collapse;
  font-size: .9375rem;
}
.psw-hl-inhoud-col :is(th, td) {
  border: 1px solid var(--cream-border);
  padding: .5rem .75rem;
  text-align: left;
  vertical-align: top;
}
.psw-hl-inhoud-col th {
  background: var(--sinopel-pale);
  color: var(--sinopel-dark);
  font-weight: 700;
}

.psw-hl-inhoud-col blockquote {
  margin: 1rem 0;
  padding: .25rem 1rem;
  border: 1px solid #F0DFA6;
  border-left: 4px solid #C99A1E;
  border-radius: .375rem;
  background: #FFF8E6;
}

.psw-hl-inhoud-col code {
  padding: .1rem .35rem;
  border: 1px solid var(--cream-border);
  border-radius: .25rem;
  background: #EFEFEA;
  font-size: .875em;
  overflow-wrap: anywhere;
}

/* Screenshots: kader zodat een lichte backend-opname niet in de crèmekleur
   wegvalt, en zoom-in omdat GLightbox eraan hangt.

   EXT:rte_ckeditor_image zet width/height op de <img> voor een stabiele
   layout-reservering; `width: 100%` overschrijft die breedte bewust, want de
   schermafbeeldingen zijn breder opgenomen dan de tekstkolom. `height: auto`
   houdt de verhouding dan intact. */
.psw-hl-inhoud-col a.psw-lightbox { display: block; margin: 1.25rem 0; }
.psw-hl-inhoud-col a.psw-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cream-border);
  border-radius: .5rem;
  cursor: zoom-in;
  transition: box-shadow .15s ease;
}
.psw-hl-inhoud-col a.psw-lightbox:hover img {
  box-shadow: 0 0 0 3px var(--sinopel-pale), 0 2px 12px rgba(0, 0, 0, .12);
}
/* Focus is geen hover: hier moet de ring echt zichtbaar zijn. De bleke tint
   haalt maar 1,06:1 op wit, de volle huiskleur 5,14:1 (WCAG 1.4.11 vraagt 3:1).
   Zonder deze regel was de outline weggehaald zonder zichtbare vervanging. */
.psw-hl-inhoud-col a.psw-lightbox:focus-visible img {
  box-shadow: 0 0 0 3px var(--sinopel), 0 2px 12px rgba(0, 0, 0, .12);
  outline: none;
}

/* Uitlijning uit de afbeeldingsknop van de RTE. De extensie levert hier zelf een
   CSS-bestand voor, maar dat wordt niet meegeladen: de site set van de extensie
   blijft buiten spel (zie TypoScript/rteImages.typoscript) en alle CSS hoort in dit
   bestand. Een schermafbeelding op volle kolombreedte is het normale geval; deze
   drie zijn voor het uitzonderlijke geval van een klein, ingezoomd detail. */
.psw-hl-inhoud-col :is(img, figure).image-center {
  display: block;
  margin-inline: auto;
}
.psw-hl-inhoud-col :is(img, figure).image-left {
  float: left;
  clear: left;
  margin: 0 1rem 1rem 0;
}
.psw-hl-inhoud-col :is(img, figure).image-right {
  float: right;
  clear: right;
  margin: 0 0 1rem 1rem;
}
/* Uitgelijnde afbeeldingen zijn per definitie smaller dan de kolom, dus hier mag
   width:100% van de regel hierboven niet gelden. */
.psw-hl-inhoud-col a.psw-lightbox img:is(.image-left, .image-right, .image-center) {
  width: auto;
  max-width: 100%;
}

/* ── Vorige / volgende ───────────────────────────────────────────────────── */
/* Komt uit Partials/HandleidingPaginering.fluid.html, niet uit de content: een
   redacteur moet 24 onderlinge links niet met de hand bijhouden. */

.psw-hl-paginering {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-border);
}

.psw-hl-paginering a {
  flex: 1 1 0;
  padding: .75rem 1rem;
  border: 1px solid var(--cream-border);
  border-radius: .5rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  line-height: 1.35;
}
.psw-hl-paginering a:hover,
.psw-hl-paginering a:focus-visible {
  border-color: var(--sinopel-nav);
  background: var(--sinopel-pale);
}
.psw-hl-paginering .is-volgende { text-align: right; }
.psw-hl-paginering .richting {
  display: block;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sinopel-nav);
}
.psw-hl-paginering .titel { font-weight: 600; }

@media (max-width: 575.98px) {
  .psw-hl-paginering { flex-direction: column; }
  .psw-hl-paginering .is-volgende { text-align: left; }
}

/* ══ SECTIE-WRAPPER (psw26_sectie_wrapper) ══ */
/* De achtergrond komt als modifier-klasse uit het template, niet als kleurwaarde
   in een style-attribuut: de vijf keuzes staan vast, dus de kleuren horen hier.
   Zie Resources/Private/Templates/Content/Psw26SectieWrapper.fluid.html. */

.psw-sw-bg-cream          { background: var(--cream); }
.psw-sw-bg-white          { background: #fff; }
.psw-sw-bg-cream-deep     { background: var(--cream-deep); }
.psw-sw-bg-sinopel        { background: var(--sinopel-nav); color: #fff; }
.psw-sw-bg-sinopel-gradient {
  background: linear-gradient(135deg, var(--sinopel-dark), var(--sinopel-nav));
  color: #fff;
}

/* Op een donkere achtergrond moeten de koppen mee omslaan, net zoals bij
   .layout-bg-3 hierboven. */
.psw-sw-bg-sinopel :is(.section-title, .section-subtitle, .section-sub),
.psw-sw-bg-sinopel-gradient :is(.section-title, .section-subtitle, .section-sub) {
  color: #fff;
}

/* ══ ACTIVITEITEN-WIDGET (psw26_activiteiten_widget) ══ */

.psw-aw-kalender-titel { font-size: 1.625rem; }

/* ══ WETICKET (psw-weticket + WeTicket-veldgroep in psw-word-lid) ══ */

/* Kaart rond het standalone block. In psw-word-lid en in een event-record valt die
   kaart weg (zie de scoped regels onderaan) — daar zit de widget al in een kader. */
.psw-weticket .wt-card {
  background: #fff;
  border: 1px solid var(--cream-border);
  border-radius: var(--bs-border-radius-xl);
  padding: 32px;
}
.layout-bg-3 .wt-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }

.wt-head  { margin-bottom: 20px; }
.wt-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.02em; margin: 4px 0 8px; }
.wt-text  { font-size: 16px; line-height: 1.7; color: #404040; margin: 0; }
.layout-bg-3 .wt-title, .wt-donker .wt-title { color: #fff; }
.layout-bg-3 .wt-text { color: rgba(255,255,255,.75); }

.wt-usps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 20px; }
.wt-usp  { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #404040; }
.wt-usp i { color: var(--sinopel-nav); font-size: 16px; }
.layout-bg-3 .wt-usp { color: rgba(255,255,255,.8); }
.layout-bg-3 .wt-usp i { color: var(--sinopel-light); }

.wt-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wt-note    { font-size: 13px; color: #595959; margin: 12px 0 0; }
.wt-donker .wt-note, .layout-bg-3 .wt-note { color: rgba(255,255,255,.8); }  /* .65 haalde op groen maar 3,98:1 */

/* Knoppen: één look, twee varianten. Geen Bootstrap-kleurklassen in Fluid, zodat
   dezelfde partial op lichte én donkere achtergrond werkt. */
.wt-btn {
  background: var(--sinopel-btn); color: #fff; font-weight: 700; border: 1px solid var(--sinopel-btn);
}
.wt-btn:hover, .wt-btn:focus-visible { background: var(--sinopel-dark); border-color: var(--sinopel-dark); color: #fff; }
.wt-btn-ghost {
  background: transparent; color: var(--sinopel-nav); font-weight: 600; border: 1px solid var(--sinopel-nav);
}
.wt-btn-ghost:hover, .wt-btn-ghost:focus-visible { background: var(--sinopel-pale); color: var(--sinopel-dark); border-color: var(--sinopel-dark); }
.wt-donker .wt-btn { background: #fff; color: var(--sinopel-dark); border-color: #fff; }
.wt-donker .wt-btn:hover, .wt-donker .wt-btn:focus-visible { background: var(--sinopel-light); color: var(--sinopel-dark); border-color: var(--sinopel-light); }
.wt-donker .wt-btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.wt-donker .wt-btn-ghost:hover, .wt-donker .wt-btn-ghost:focus-visible { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* Ingesloten shop. --wt-h komt uit het veld "hoogte" op het element. */
.wt-embed { position: relative; }
.wt-frame {
  display: block; width: 100%; height: var(--wt-h, 900px); border: 0;
  border-radius: var(--bs-border-radius-lg); background: #fff;
}
/* Zolang cookie-banner.js data-psw-src niet naar src verplaatst heeft, is er geen
   iframe om te tonen — anders krijg je een leeg wit vlak onder de uitleg. */
.wt-frame:not([src]) { display: none; }

.wt-consent {
  text-align: center; padding: 40px 24px;
  background: var(--cream); border: 1px dashed var(--cream-border);
  border-radius: var(--bs-border-radius-lg);
}
.wt-consent-icon { font-size: 32px; color: var(--sinopel-nav); display: block; margin-bottom: 12px; }
.wt-consent-text { font-size: 15px; line-height: 1.65; color: #404040; max-width: 46ch; margin: 0 auto 20px; }
.wt-consent-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wt-consent-hint { font-size: 13px; color: #595959; margin: 16px 0 0; }
.wt-consent-link { color: var(--sinopel-nav); text-decoration: underline; }
.wt-consent-link:hover, .wt-consent-link:focus-visible { color: var(--sinopel-dark); }
.wt-donker .wt-consent-hint { color: rgba(255,255,255,.7); }
.wt-donker .wt-consent-link { color: #fff; }
.wt-donker .wt-consent { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.wt-donker .wt-consent-icon { color: var(--sinopel-light); }
.wt-donker .wt-consent-text { color: rgba(255,255,255,.8); }

/* In de donkere "word lid"-sectie staat alles gecentreerd. */
.lid-worden-section .wt-actions { justify-content: center; }
.lid-worden-section .wt-note    { text-align: center; }

/* Binnen een event-record (EXT:sf_event_mgt_contentelements) draagt de detailpagina
   de sectiestructuur al: haal de sectiepadding, de container en de kaartrand weg. */
/* !important is hier nodig omdat Bootstrap's .py-5 zelf !important gebruikt. */
.event-detail-content { margin-top: 24px; }
.event-detail-content .psw-weticket { padding: 0 !important; background: none; }
.event-detail-content .psw-weticket > .container { padding-left: 0; padding-right: 0; max-width: none; }
.event-detail-content .psw-weticket .wt-card {
  padding: 24px; background: var(--cream); border-color: var(--cream-border);
}

/* ══ HERO — ACHTERGROND- EN LAYOUTVARIANTEN ══
   Gestuurd door de velden "Achtergrond" en "Layout" van het content block
   psw-hero, die data-hero-bg en data-hero-layout op de sectie zetten.
   De standaardwaarden (raster / standaard) krijgen geen eigen regels: dat is
   de basisopmaak hierboven. */

/* geen — enkel de effen huiskleur */
.psw-hero[data-hero-bg="geen"] .hero-grid-lines { background-image: none; }

/* raster met spotlicht linksboven */
.psw-hero[data-hero-bg="raster-licht"] .hero-grid-lines {
  background-image: radial-gradient(110% 90% at 8% 0%, rgba(255,255,255,.15), transparent 60%),
                    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}

/* concentrische cirkels vanuit rechtsboven */
.psw-hero[data-hero-bg="cirkels"] .hero-grid-lines {
  background-image: repeating-radial-gradient(circle at 88% 8%, rgba(255,255,255,.075) 0 1px, transparent 1px 48px);
  background-size: auto;
}

/* zachte kleurvlekken (mesh) — de negatieve inset houdt de blur van de randen weg */
.psw-hero[data-hero-bg="mesh"] .hero-grid-lines {
  inset: -90px;
  background-image: radial-gradient(58% 58% at 80% 10%, rgba(123,45,139,.50), transparent 70%),
                    radial-gradient(52% 52% at 15% 90%, rgba(0,77,0,.75), transparent 70%),
                    radial-gradient(46% 46% at 48% 32%, rgba(173,234,173,.20), transparent 70%);
  background-size: auto;
  filter: blur(10px);
}

/* spotlicht */
.psw-hero[data-hero-bg="spotlicht"] .hero-grid-lines {
  background-image: radial-gradient(120% 95% at 10% -5%, rgba(255,255,255,.18), transparent 62%),
                    radial-gradient(70% 70% at 95% 100%, rgba(0,77,0,.6), transparent 70%);
  background-size: auto;
}

/* ── Foto rechts ─────────────────────────────────────────────────────────
   De foto is een echte <img> (WebP + srcset) die onder .hero-grid-lines ligt.
   Twee smaken:
     foto-rechts       — vervaagt naar de tekstzijde, met een groene sluier
     foto-rechts-vlak  — vult de rechterhelft met een rechte rand, geen sluier
   Bij de vlakke variant staat het beeld op volle sterkte; de tekst blijft
   volledig op het groen staan, dus er is niets nodig om ze leesbaar te houden. */
/* .hero-bg-slide is de laag; de <img> vult hem. De slide is een <a> zodra de
   redacteur bij die foto een link invult, anders een <span>. Zo hangt de
   klikbaarheid aan hetzelfde element dat ook de cross-fade doet. */
.hero-bg-slide {
  position: absolute; inset: 0;
  display: block;
}
.hero-bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
  display: block;
}

/* vervaagd */
.psw-hero[data-hero-bg="foto-rechts"] .hero-bg-slide {
  -webkit-mask-image: linear-gradient(90deg, transparent 24%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 24%, #000 70%);
}
.psw-hero[data-hero-bg="foto-rechts"] .hero-grid-lines {
  background-image: linear-gradient(90deg, rgba(0,102,0,.92) 0%, rgba(0,102,0,.55) 48%, rgba(0,77,0,.25) 100%);
  background-size: auto;
}

/* rechte rand: enkel de rechterhelft, rechte hoeken, scherpe scheiding
   met het groen. */
.psw-hero[data-hero-bg="foto-rechts-vlak"] .hero-bg-slide {
  left: auto; right: 0; width: 50%;
  object-position: center;
}
/* Textuur op de teksthelft. De fotohelft blijft onbewerkt: een patroon over
   een foto wordt alleen maar onrustig. background-size van 50% met no-repeat
   houdt de cirkels aan de tekstkant; het is dezelfde tekening als de
   achtergrondkeuze "cirkels", maar met het middelpunt links in plaats van
   rechtsboven. */
.psw-hero[data-hero-bg="foto-rechts-vlak"] .hero-grid-lines {
  background-image: repeating-radial-gradient(circle at 18% 24%,
    rgba(255,255,255,.075) 0 1px, transparent 1px 48px);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 50% 100%;
}

/* Onder lg staat de foto als strook onderaan en loopt de tekst over de volle
   breedte: dan mogen de cirkels dat ook, maar niet tot over die strook. */
@media (max-width: 991.98px) {
  .psw-hero[data-hero-bg="foto-rechts-vlak"] .hero-grid-lines {
    background-size: 100% calc(100% - var(--hero-fotostrook, 220px));
  }
}

/* Geen sluier over de foto: die blijft onbewerkt. De leesbaarheid wordt
   volledig door de kaart zelf gedragen, zie hieronder. */

/* De foto is aanklikbaar zodra er een link aan hangt, maar .container ligt met
   z-index over de hele hero en ving die klikken op. De container zelf hoeft
   niets te vangen; de twee kolommen erin wel, anders kan je de tekst niet meer
   selecteren en zijn de knoppen dood. */
.psw-hero[data-hero-bg="foto-rechts-vlak"] > .container { pointer-events: none; }
.psw-hero[data-hero-bg="foto-rechts-vlak"] .hero-content { pointer-events: auto; }
/* De kaartkolom is even hoog als de hele hero en ving daardoor ook de klikken
   naast en onder de kaart af. Alleen de kaart zelf hoort dat te doen, de rest
   van die kolom is lege ruimte waar de foto doorheen mag. */
.psw-hero[data-hero-bg="foto-rechts-vlak"] .hero-card { pointer-events: none; }
.psw-hero[data-hero-bg="foto-rechts-vlak"] .hero-event-card { pointer-events: auto; }

/* Boven een foto draagt de kaart zelf de leesbaarheid. rgba(255,255,255,.1) is
   een lichte glasplaat: op een donkere achtergrond werkt dat, op een lichte
   foto verdwijnt de witte tekst erin. Een donkere basis werkt in beide
   gevallen, en hoe licht de foto is bepaalt de redacteur, niet de CSS.
   Geldt voor allebei de fotovarianten, en enkel vanaf lg: daaronder staat de
   kaart niet op de foto. */
@media (min-width: 992px) {
  .psw-hero[data-hero-bg^="foto-rechts"] .hero-event-card {
    background: color-mix(in srgb, var(--bs-indigo) var(--hero-kaart-dekking, 38%), transparent);
    border-color: rgba(255,255,255,.35);
  }

  /* De dekking van 78% laat zoveel mogelijk van de foto door en houdt het
     contrast toch boven de norm. Doorgerekend op het slechtste geval, een
     spierwitte foto achter de kaart:
         wit 1.00 → 4,98:1     wit 0.95 → 4,66:1
         wit 0.90 → 4,33:1     wit 0.85 → 4,04:1   (die laatste twee zakken dus)
     Vandaar dat alle tekst in deze kaart minstens .95 is. Hiërarchie komt van
     lettergrootte en gewicht, niet van doorzichtigheid: dat laatste is precies
     wat op een foto onbetrouwbaar wordt. */
  .psw-hero[data-hero-bg^="foto-rechts"] .hero-event-card .upcoming-cat,
  .psw-hero[data-hero-bg^="foto-rechts"] .hero-event-card .upcoming-mo,
  .psw-hero[data-hero-bg^="foto-rechts"] .hero-event-card .upcoming-label,
  .psw-hero[data-hero-bg^="foto-rechts"] .hero-event-card .hero-cap-meta,
  .psw-hero[data-hero-bg^="foto-rechts"] .hero-event-card .event-meta {
    color: rgba(255,255,255,.95);
  }
}

/* Reliëf in twee lagen, allebei los van de foto's: bij een reeks liggen die
   over elkaar, en dan zou een schaduw op de foto zelf bij elke overgang mee
   op- en afzwellen.
     ::after  — de slagschaduw op het groen
     ::before — de lichtrand, uitgevaagd zodat het licht enkel de bovenhoek
                raakt en niet als een getrokken lijn oogt */
.psw-hero[data-hero-bg="foto-rechts-vlak"]::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 50%;
  box-shadow: -22px 0 46px rgba(0,0,0,.40);
  pointer-events: none;
}
.psw-hero[data-hero-bg="foto-rechts-vlak"]::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 50%;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.22);
  border-left: 1px solid rgba(255,255,255,.22);
  -webkit-mask-image: linear-gradient(158deg, #000 0%, rgba(0,0,0,.45) 22%, transparent 58%);
          mask-image: linear-gradient(158deg, #000 0%, rgba(0,0,0,.45) 22%, transparent 58%);
  pointer-events: none;
}
/* de tekstkolom moet boven beide lagen blijven */
.psw-hero[data-hero-bg="foto-rechts-vlak"] > .container { z-index: 1; }

/* Meerdere foto's: trage cross-fade, aangezet door assets/frontend.js van
   psw-hero. Zonder dat attribuut staan de foto's gestapeld en zie je de
   laatste — dat is de terugval als het script niet draait. */
.psw-hero[data-hero-slideshow] .hero-bg-slide {
  opacity: 0;
  transition: opacity var(--hero-fade, 2.5s) ease-in-out;
  /* De foto's liggen op elkaar: zonder dit vangt de bovenste van de stapel de
     klik op, ook al zie je die niet. */
  pointer-events: none;
}
.psw-hero[data-hero-slideshow] .hero-bg-slide.is-active { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .psw-hero[data-hero-slideshow] .hero-bg-slide { transition: none; }
}

/* Onder lg staan de kolommen onder elkaar: dan zakt de foto naar onderen,
   weg van de titel. */
@media (max-width: 991.98px) {
  /* vervaagd: over de volle breedte, met een stevigere sluier erover */
  .psw-hero[data-hero-bg="foto-rechts"] .hero-bg-slide {
    object-position: center;
    -webkit-mask-image: linear-gradient(180deg, transparent 32%, #000 85%);
            mask-image: linear-gradient(180deg, transparent 32%, #000 85%);
  }
  .psw-hero[data-hero-bg="foto-rechts"] .hero-grid-lines {
    background-image: linear-gradient(180deg, rgba(0,102,0,.95) 0%, rgba(0,102,0,.72) 55%, rgba(0,77,0,.38) 100%);
  }

  /* rechte rand: een strook onderaan met een rechte bovenrand. De extra
     onderpadding houdt de tekst van die strook af, want zonder sluier zou
     witte tekst op een lichte foto onleesbaar worden. */
  /* De extra [data-hero-layout] staat er om de selector zwaarder te maken dan
     .psw-hero[data-hero-layout~="compact"] verderop, die met de shorthand
     `padding` ook de onderkant zet. Even zware selectors, dus zonder dit wint
     de laatste in het bestand en valt de fotostrook over de inhoud. Het
     attribuut staat altijd op de sectie, dus dit matcht altijd. */
  .psw-hero[data-hero-bg="foto-rechts-vlak"][data-hero-layout] {
    padding-bottom: calc(var(--hero-fotostrook, 220px) + 40px);
  }
  .psw-hero[data-hero-bg="foto-rechts-vlak"] .hero-bg-slide {
    left: 0; right: 0; width: 100%;
    top: auto; bottom: 0; height: var(--hero-fotostrook, 220px);
  }
  /* Zichtbare focus op een aanklikbare foto, ook op de strook onderaan. */
  .hero-bg-slide:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
  .psw-hero[data-hero-bg="foto-rechts-vlak"]::after {
    left: 0; top: auto; height: var(--hero-fotostrook, 220px);
    box-shadow: 0 -18px 38px rgba(0,0,0,.40);
  }
  .psw-hero[data-hero-bg="foto-rechts-vlak"]::before {
    left: 0; top: auto; height: var(--hero-fotostrook, 220px);
    border-left: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 45%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 45%);
  }
}

/* ── Layouts ─────────────────────────────────────────────────────────────
   "Layout" is een meervoudige keuze, dus de waarden staan als losse woorden
   in het attribuut ("compact tegels"). Vandaar ~= in plaats van =.
   Compact staat bewust vóór tegels: waar beide dezelfde eigenschap zetten,
   wint tegels — dat is de bedoeling, anders trekt compact de tegels weer uit
   elkaar met een gap en een padding onder een rand die er niet meer is. */

/* compact — lagere hero, kleinere typografie */
.psw-hero[data-hero-layout~="compact"] { padding: 48px 0 40px; }
.psw-hero[data-hero-layout~="compact"] .hero-title { font-size: clamp(28px, 3.6vw, 40px); }
.psw-hero[data-hero-layout~="compact"] .hero-sub { font-size: 17px; margin-bottom: 22px; }
.psw-hero[data-hero-layout~="compact"] .hero-stats { margin-top: 28px; padding-top: 20px; gap: 24px; }

/* cijfers als tegels */
@media (min-width: 576px) {
  .psw-hero[data-hero-layout~="tegels"] .hero-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    border-top: 0; padding-top: 0;
  }
  .psw-hero[data-hero-layout~="tegels"] .hero-stats > div {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--bs-border-radius-lg); padding: 14px 16px;
  }
}
@media (min-width: 992px) {
  .psw-hero[data-hero-layout~="tegels"] .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

/* compact én tegels samen — strakkere tegels, zodat de rij niet alsnog
   evenveel hoogte inneemt als in de gewone layout */
.psw-hero[data-hero-layout~="compact"][data-hero-layout~="tegels"] .hero-stats { margin-top: 24px; }
@media (min-width: 576px) {
  .psw-hero[data-hero-layout~="compact"][data-hero-layout~="tegels"] .hero-stats { gap: 10px; }
  .psw-hero[data-hero-layout~="compact"][data-hero-layout~="tegels"] .hero-stats > div { padding: 10px 12px; }
  .psw-hero[data-hero-layout~="compact"][data-hero-layout~="tegels"] .hero-stat-n { font-size: 24px; }
}