/* ========================================================= */
/*  KLEUREN / FONTS                                          */
/* ========================================================= */

:root {
  --primary: #FF6A00;
  --primary-dark: #f68b28;
  --background: #f3f4f6;
  --text-dark: #0072ac;
  --text-light: #FFFFFF;
  --lijstkleur: #FF6A00;
  --accent-color: #FF6A00;

  --font-main: "Poppins", sans-serif;
  --font-heading: "Poppins", sans-serif;

  --steun-panel-width: 320px;
  --steun-tab-width: 52px;

}

/* ========================================================= */
/*  ALGEMENE LAYOUT                                          */
/* ========================================================= */

body {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 400;   /* was 400 */
  color: var(--text-dark);

  /* ruimte voor sticky header */
  padding-top: 280px;

  /* achtergrond wordt via ::before geregeld */
  position: relative;
  background: none;
}

.container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.07);
  border-top: 5px solid var(--primary); /* oranje rand bovenaan elk blok (huisstijl) */
  scroll-margin-top: 160px;
}


h2 {
  color: var(--primary);
  font-family: var(--font-heading);
}

/* Oranje accenten in content */
.container p strong {
  color: var(--primary);
  font-weight: 700; /* blijft duidelijk vet */
}

#verkiezingsprogramma ul {
  display: flex;
  gap: 20px;          /* ruimte tussen de items */
  list-style: none;  /* bolletjes weg */
  padding: 0;
}

#verkiezingsprogramma li {
  display: inline-block;
  margin-right: 20px;
}

.programma-content details > *:not(summary) {
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.programma-search {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  margin: 12px 0 20px 0;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.programma-search:focus {
  outline: none;
  border-color: var(--primary);
}


/* ========================================================= */
/* PRINT / PDF STIJLEN – VERKIEZINGSPROGRAMMA                */
/* ========================================================= */
@media print {

  /* Algemeen */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  /* Verberg knoppen en overlays */
  .close,
  #toggleAll,
  button {
    display: none !important;
  }

  /* Modals worden normale content */
  .team-modal,
  .team-modal-content {
    position: static !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Programma inhoud */
  .programma-content {
    padding: 0;
  }

  /* Details altijd open */
  .programma-content details {
    display: block;
    border: none;
    page-break-inside: avoid;
  }

  .programma-content details summary {
    font-size: 14pt;
    font-weight: 700;
    margin-top: 20pt;
    margin-bottom: 6pt;
  }

  /* Verberg + / − */
  .programma-content summary::after {
    display: none;
  }

  /* Paragrafen compact */
  .programma-content p {
    margin: 4pt 0;
  }

  /* Geen afbreking midden in hoofdstuk */
  h2, h3 {
    page-break-after: avoid;
  }

}


/* ========================================================= */
/*  HEADER + SHRINK                                          */
/* ========================================================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 280px;
  border-bottom: 5px solid #FF6A00;
  background: url('assets/images/header.jpg') center/cover no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  z-index: 1000;
  transition: height 0.45s ease, background-size 0.45s ease;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255, 255, 255);
  z-index: 1;
  pointer-events: none; /* 🔑 DIT */
}



header.shrink { 
  height: 120px;            /* banner wordt echt kleiner */
  background-size: 160%;   /* zoomt iets in zodat het klein lijkt */
}

/* ============================= */
/* HEADER LOGO LINKS (ALLE STATES)
/* ============================= */

.header-logo.left {
  left: 20px;
  top: 20px;
  transition:
    left 1.8s ease,
    top 1.8s ease,
    transform 1.8s ease;
}

/* Intro: groot in het midden */
.header-logo.left.intro {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.9);
  z-index: 9999;
}

/* Intro al eerder gezien: logo staat direct op zijn plek */
.intro-gezien .header-logo.left.intro {
  position: absolute;
  left: 20px;
  top: 20px;
  transform: none;
  z-index: 3;
  transition: none;
}

/* Extra overlay state (optioneel) */
.header-logo.left.intro-overlay {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.35);
  z-index: 9999;
}



/* ========================================================= */
/*  LOGO'S HEADER (MET INTRO ANIMATIE)                        */
/* ========================================================= */

.header-logo {
  position: absolute;
  top: 20px;
  z-index: 3;
}

/* LOGO AFMETING */
.header-logo img {
  width: 270px;
  height: auto;
  transition: width 0.35s ease, top 0.35s ease;
}

/* RECHTS LOGO */
.header-logo.right {
  right: 20px;
}

/* SHRINK EFFECT */
header.shrink .header-logo img {
  width: 90px;
  top: -10px;
}


/* MOBIEL LOGO (standaard verborgen) */
.mobile-logo {
  display: none;
  text-align: center;
}

.mobile-logo img {
  width: 160px;
  height: auto;
}


/* ========================================================= */
/*  HEADER TEKST                                             */
/* ========================================================= */

.header-text {
  position: relative;
  z-index: 5;
}

header h1 {
  font-size: 3rem;
  margin: 0;
  color: #006AA7;
  text-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: font-size 0.35s ease;
}



header.shrink h1 {
  font-size: 1.6rem;
}

.slogan {
  font-size: 1.6rem;
  margin-top: 10px;
  color: #ED6E00;
  text-shadow: 0 4px 10px rgba(255, 255, 255, 0.4);
  transition: font-size 0.35s ease;
}

header.shrink .slogan {
  font-size: 0.9rem;
}

/* Tekstkleur bij scrollen (shrink mode) */
header.shrink h1,
header.shrink .slogan {
  color: #006AA7;   
  text-shadow: 0 4px 10px rgba(255, 255, 255, 0.4);
}

header.shrink .header-logo img {
  width: 90px;
  top: -10px; /* hoger */
}



/* ========================================================= */
/*  NAVIGATIE                                                */
/* ========================================================= */

nav {
  background: var(--primary);
  padding: 15px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;    /* <<< DIT FIXT ALLES */
  gap: 25px;
  /* menu blijft in beeld onder de vaste kop */
  position: sticky;
  top: 280px;
  z-index: 999;
  transition: top 0.45s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
body:has(header.shrink) nav { top: 120px; }
.menu-knop { display: none; }

nav a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  white-space: nowrap;   /* <<< voorkomt lelijke woordafbreking */
}

nav a:hover {
  color: #d0e5ff;
}

/* ankers (#team, #contact) niet onder kop + menu laten verdwijnen */
[id] { scroll-margin-top: 190px; }


/* ========================================================= */
/*  BUTTONS                                                   */
/* ========================================================= */

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;

  /* Mooie moderne schaduw */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: 
      background 0.25s ease,
      transform 0.2s ease,
      box-shadow 0.25s ease;
}

.btn:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.4);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(255, 106, 0, 0.3);
}

.download-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.download-btn:hover {
  background: var(--primary-dark);
}



/* ========================================================= */
/* 3D TILES                                                  */
/* ========================================================= */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.tile {
  text-decoration: none;
  perspective: 800px;
}

.tile-inner {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.40);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

.tile:hover .tile-inner {
  transform: translateY(-10px) rotateX(8deg) rotateY(5deg);
  box-shadow: 0 25px 45px rgba(255,106,0,0.40);
}

/* ========================================================= */
/* TEAM CARDS                                                */
/* ========================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-top: 25px;
  align-items: start;
}

.team-card {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.40);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(255,106,0,0.40);
}

.team-card img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin-bottom: 12px;
}

.modal-lijstnummer {
  margin: 12px auto 16px;
  text-align: center;
  font-weight: 700;
  color: var(--primary);
  font-size: 1rem;
}


/* ========================================================= */
/* TEAM MODAL                                                */
/* ========================================================= */

.team-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.team-modal-content {
  background: #fff;
  border-radius: 14px;
  padding: 30px;
  max-width: 450px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow:
      0 0 15px rgba(255, 106, 0, 0.35),
      0 0 30px rgba(255, 106, 0, 0.20),
      0 15px 40px rgba(0,0,0,0.25); /* bestaande schaduw versterkt */
}

.team-modal-content img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin-bottom: 15px;
}

.team-modal .close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 2rem;
  color: #444;
  cursor: pointer;
  z-index: 10;
  padding: 10px;
}

.modal-small {
  max-width: 600px;
}


/* =====================================
   TEAM SLIDER (KLEINERE KAARTEN)
===================================== */

.team-top .team-large img {
  width: 180px;
  height: 180px;
}

/* wrapper zoals nieuws */
.team-slider-wrapper {
  position: relative;
  margin-top: 40px;
}

/* slider zelf */
.team-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

/* kleine team kaarten */
.team-card.team-small {
  min-width: 160px;
  max-width: 160px;
  padding: 15px;
  font-size: 0.9rem;
}

.team-card.team-small img {
  width: 100px;
  height: 100px;
}

/* mobiel iets groter */
@media (max-width: 768px) {
  .team-card.team-small {
    min-width: 140px;
  }
}

.photo-wrap {
  position: relative;
  overflow: visible; /* belangrijk */
}

.list-number,
.modal-lijstnummer {
  position: absolute;
  bottom: -12px;          /* ⬅️ schuif omhoog / omlaag */
  left: 50%;
  transform: translateX(-50%);
  
  background: var(--background); /* zelfde kleur als pagina */
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;

  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


.team-card:hover .list-number {
  transform: scale(1.1);
  transition: transform .2s ease;
}



/* ========================================================= */
/* FOOTER                                                     */
/* ========================================================= */

footer {
  background: #111;
  color: #ccc;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

.footer-socials {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center; /* of left als je dat liever hebt */
  gap: 8px;
}

.footer-socials a {
  color: #ccc;
  font-size: 22px;
  margin: 0 10px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-socials .cookie-link {
  font-size: 0.85rem;
  color: inherit;
  text-decoration: underline;
}

.footer-socials a:hover {
  color: #FF4500; /* accentkleur */
  transform: scale(1.2);
}


/* ============================= */
/*      MOBIEL WEERGAVE          */
/* ============================= */
@media (max-width: 768px) {

  /* Header kleiner op mobiel */
  header {
    height: 160px;
    background-size: cover;
    justify-content: center;
    position: fixed;       /* header vastzetten */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }

  body {
    padding-top: 160px; /* perfect gelijk aan header-hoogte */
  }

  /* Hamburgermenu */
  nav { top: 160px; padding: 0; gap: 0; flex-direction: column; align-items: stretch; }
  body:has(header.shrink) nav { top: 80px; }
  nav .menu-knop {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: none; border: 0; color: var(--text-light); font: inherit; font-weight: bold; font-size: 1.1rem;
    padding: 12px 16px; cursor: pointer; width: 100%;
  }
  .menu-knop .streepjes { display: grid; gap: 4px; width: 22px; }
  .menu-knop .streepjes span { display: block; height: 3px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  nav.open .menu-knop .streepjes span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.open .menu-knop .streepjes span:nth-child(2) { opacity: 0; }
  nav.open .menu-knop .streepjes span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  nav a { display: none; padding: 12px 16px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .25); }
  nav.open a { display: block; }
  nav.open { max-height: calc(100vh - 80px); overflow-y: auto; }
  [id] { scroll-margin-top: 140px; }

  /* Desktop logo’s verbergen */
  .header-logo.left,
  .header-logo.right {
    display: none !important;
  }

  /* Mobiel logo tonen en IN de header plaatsen */
  .mobile-logo {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: absolute;   /* niet meer onder de header */
    top: 30px;            /* mooi in de oranje balk */
    left: 0;
    width: 100%;
    z-index: 1000;
    margin: 0 !important; /* dit verwijdert jouw fout */
  }

  .mobile-logo img {
    width: 200px;
    height: auto;
  }

  /* Header-tekst verbergen op mobiel */
  .header-text {
    display: none !important;
  }

  /* Shrink effect op mobiel */
  header.shrink {
    height: 80px;
  }

  header.shrink .mobile-logo {
    top: 6px;      /* logo blijft in de header */
  }

  header.shrink .mobile-logo img {
    width: auto;   /* past binnen de ingeklapte kop, boven het menu */
    height: 66px;
  }

}

/* ========================================================= */
/* CONTACT FORMULIER (mooie uitlijning)                      */
/* ========================================================= */

  form .form-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 18px;
  }

  form label {
      font-weight: bold;
      margin-bottom: 6px;
  }

  form input,
  form textarea,
  form select {
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 1rem;
      box-sizing: border-box;
  }

  form textarea {
      resize: vertical;
  }

  form button {
      margin-top: 10px;
  }


/* ========================================================= */
/* LID-WORDEN POPUP SCROLL                                   */
/* ========================================================= */

  body.popup-open {
      overflow: hidden; /* voorkomt dubbele scrollbars */
  }

/* ========================================================= */
/* VERKIEZINGSPROGRAMMA POPUPS – GROTER + SCROLLBAAR         */
/* ========================================================= */

#verkiezingsprogramma .team-modal-content,
#themas .team-modal-content,
#speerpunten .team-modal-content,
#programma .team-modal-content {
    max-width: 900px;        /* groter venster */
    width: 90%;
    max-height: 80vh;        /* nooit hoger dan scherm */
    overflow-y: auto;        /* 🔑 scrollen binnen popup */
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
}

.programma-content details {
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}

.programma-content summary {
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.programma-content summary::-webkit-details-marker {
  display: none;
}

.programma-content summary::after {
  content: "+";
  font-size: 1.4rem;
  margin-left: 12px;
}

.programma-content details[open] summary::after {
  content: "−";
}

.programma-content summary:hover {
  color: var(--primary);
}

.programma-content p {
  margin: 6px 0;
}

.programma-highlight {
  background: #ffe066;
  padding: 0 2px;
  border-radius: 3px;
}

.team-top .team-card img {
  width: 180px;
  height: 180px;
}

.team-top .team-card h3 {
  font-size: 1.3rem;
}

.team-card h3 {
  margin-top: 24px;
}


/* ==============================
   VOLLEDIGE TEAMLIJST (GRID)
============================== */

.team-grid.full-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 1200px) {
  .team-grid.full-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .team-grid.full-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .team-grid.full-list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==============================
   TEAM KANDIDATEN SLIDER
================================*/

.team-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 4px;
}

/* scrollbar verbergen */
.team-slider::-webkit-scrollbar {
  display: none;
}
.team-slider {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.team-slider .team-card {
  min-width: 220px;
  flex-shrink: 0;
}

/* pijltjes */
.slider-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.slider-btn:hover {
  background: var(--primary-dark);
  transform: scale(1.08);
}

.slider-btn.prev {
  margin-right: 8px;
}

.slider-btn.next {
  margin-left: 8px;
}


/* ========================================================= */
/* FORCEER FONT IN MODALS & FORMULIEREN                      */
/* ========================================================= */

.team-modal,
.team-modal * {
  font-family: var(--font-main) !important;
}


/* ========================================================= */
/* STEUN ONS SLIDER                                          */
/* ========================================================= */

#steunSlider {
  position: fixed;
  top: 30%;
  right: 0;
  z-index: 9998;
  font-family: var(--font-main);
}

/* Tab (zichtbare knop) */
#steunTab {
  width: var(--steun-tab-width);
  background: #ff6a00;
  color: #fff;
  font-weight: 700;
  padding: 16px 8px;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  box-shadow: -4px 0 10px rgba(0,0,0,0.2);
}


/* Uitklapbaar paneel */
#steunPanel {
  position: absolute;
  top: 0;
  right: calc(-1 * (var(--steun-panel-width) + var(--steun-tab-width)));
  width: var(--steun-panel-width);
  background: #fff;
  padding: 25px;
  border-radius: 12px 0 0 12px;
  box-shadow: -6px 0 20px rgba(0,0,0,0.25);
  transition: right 0.35s ease;
}


/* Actieve staat */
#steunSlider.open #steunPanel {
  right: var(--steun-tab-width);
}


#steunPanel h3 {
  color: var(--primary);
  margin-top: 0;
}

#steunPanel a {
  color: var(--primary);
  font-weight: bold;
  text-decoration: none;
}

#steunPanel a:hover {
  text-decoration: underline;
}



/* Mobiel iets lager */
@media (max-width: 768px) {
  #steunSlider {
    top: 35%;
  }
}


/* ========================================================= */
/*  ACHTERGROND FOTO MET INSTELBARE OPACITY                  */
/* ========================================================= */


/* Semi-transparante achtergrondlaag */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url('images/achtergrond.jpg'); /* <-- jouw foto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-position: center 120px; /* <<< HIER NAAR BENEDEN SCHUIVEN */

  opacity: 0.25; /* <-- PAS HIER DE ZICHTBAARHEID AAN (0.0 - 1.0) */
  z-index: -1;

  /* voorkomt scroll bouncing en zorgt dat hij blijft staan */
  pointer-events: none;
}

/* ========================================================= */
/* NIEUWS CARDS (gebruiken bestaande team-card styling)     */
/* ========================================================= */

.news-card p {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0;
  color: inherit;   /* neemt body-kleur over */
}


/* "Meer weergeven" knopje */
.news-card .meer {
  margin-top: 10px;
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  font-weight: bold;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

.news-card .meer:hover {
  color: var(--primary-dark);
  transform: translateX(3px);
}

.news-date {
  font-size: 13px;
  color: gray;
}


/* Nieuws-afbeeldingen rechthoekig i.p.v. rond */
.news-card img {
  width: 100%;
  height: 180px;
  border-radius: 12px;      /* geen rond paspoort-effect */
  object-position: top; /* ⬅️ toont bovenkant van de foto */
  object-fit: cover;
  margin-bottom: 12px;
}

/* Modal afbeelding voor nieuws ook rechthoekig */
.news-modal img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Klikbare items in verkiezingsprogramma */
#verkiezingsprogramma ul li.programma-item {
    cursor: pointer;
    color: #0077cc;           /* blauwe klikbare kleur */
    font-weight: 600;
    padding: 5px 0;
    transition: 0.2s ease;
}

/* Hover effect zoals links */
#verkiezingsprogramma ul li.programma-item:hover {
    color: #005fa3;
    text-decoration: underline;
    transform: translateX(3px);
}

/* Tekst links uitlijnen in verkiezingsprogramma-popups */
#themas .team-modal-content,
#speerpunten .team-modal-content,
#programma .team-modal-content {
    text-align: left !important;
    font-size: 20px;   /* pas dit aan naar wens */
    line-height: 1.5;
}

.programma-item {
  padding: 10px 16px;
  background: #eee;
  border-radius: 6px;
}

.programma-item:hover {
  background: #ddd;
}

.programma-content details {
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}

.programma-content summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.programma-content summary::-webkit-details-marker {
  display: none;
}

.programma-content summary::after {
  content: "+";
  float: right;
}

.programma-content details[open] summary::after {
  content: "−";
}

.programma-content p {
  margin: 6px 0;
}

.modal-lijstnummer {
  display: inline-block;
  margin: 10px auto;
  padding: 6px 14px;
  background: #000;
  color: #fff;
  font-weight: 700;
  border-radius: 20px;
  font-size: 0.9rem;
  background-color: var(--primary);
  color: var(--text-light);
}


/* ========================================================= */
/* GROTERE NIEUWSPOPUPS + LINKS UITLIJNEN                    */
/* ========================================================= */

.news-modal .team-modal-content {
    max-width: 900px !important;  /* popup flink groter */
    width: 90% !important;        /* schaalt goed op mobiel */
    text-align: left !important;  /* tekst links uitlijnen */
    font-size: 18px;              /* iets grotere leestekst (optioneel) */
    line-height: 1.6;
}

/* Nieuwsafbeelding binnen de popup netjes breder */
.news-modal .team-modal-content img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 20px;
}

/* ========================================================= */
/* NIEUWSPOPUP LATEN SCROLLEN                                */
/* ========================================================= */

.news-modal .team-modal-content {
    max-height: 80vh;       /* popup hoogte beperkt tot viewport */
    overflow-y: auto;       /* inhoud binnen popup scrollt */
}

/* ========================================================= */
/* NIEUWS GRID VERBETERING                                   */
/* ========================================================= */

#nieuwsItems.team-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

#nieuwsItems {
  align-items: stretch;
}

/* =====================================
   NIEUWS OVERZICHT – GELIJKE TEGELS
===================================== */

#nieuwsItems {
  align-items: stretch;
}

/* Geen height: 100% — de grid rekt de tegels al op, en met padding
   (content-box) schoot de tegel 40px over de volgende rij heen. */
#nieuwsItems .team-card {
  display: flex;
  flex-direction: column;
}

#nieuwsItems .team-card img {
  flex-shrink: 0;
}

/* Alleen de samenvatting rekt op, zodat datum en "Meer weergeven"
   in elke tegel op dezelfde hoogte onderaan staan */
#nieuwsItems .team-card p:not(.news-date) {
  flex-grow: 1;
}

#nieuwsItems .meer {
  align-self: center;
}

/* Op nieuws-pagina géén hoofdnieuws: zelfde maat als de rest */
body.news-page .main-news {
  grid-column: span 1;
}

body.news-page .main-news img {
  height: 180px;
}

body.news-page .main-news h3 {
  font-size: revert;
}


/* ========================================================= */
/* HOOFDNIEUWS (EERSTE ITEM)                                  */
/* ========================================================= */

.main-news {
  grid-column: span 2;
}

.main-news img {
  height: 260px;
}

.main-news h3 {
  font-size: 1.4rem;
}

/* Mobiel: weer normaal */
@media (max-width: 768px) {
  .main-news {
    grid-column: span 1;
  }

  .main-news img {
    height: 200px;
  }
}



/* =====================================
   HOMEPAGE NIEUWS SLIDER – UITGEBREID
===================================== */

.news-slider-wrapper {
  position: relative;
}

.news-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

/* scrollbar subtiel */
.news-slider::-webkit-scrollbar {
  height: 8px;
}
.news-slider::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

/* standaard kaart */
.news-slider .team-card {
  min-width: 300px;
  max-width: 300px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* 🔥 EERSTE (NIEUWSTE) ITEM GROTER */
.news-slider .team-card:first-child {
  min-width: 420px;
  max-width: 420px;
}

.news-slider .team-card:first-child img {
  height: 260px;
}

/* =========================
   PIJLTJES
========================= */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.slider-arrow.left {
  left: -20px;
}

.slider-arrow.right {
  right: -20px;
}

.slider-arrow:hover {
  background: var(--primary-dark);
}

/* mobiel: pijlen iets kleiner */
@media (max-width: 768px) {
  .news-slider .team-card:first-child {
    min-width: 320px;
    max-width: 320px;
  }

  .slider-arrow {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* =====================================
   MEER NIEUWS TEGEL
===================================== */

.more-news {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  min-width: 300px;
  max-width: 300px;
}

.more-news .more-inner span {
  font-size: 1.4rem;
  font-weight: bold;
  display: block;
}

.more-news .more-inner small {
  opacity: 0.85;
}

.more-news:hover {
  background: var(--primary-dark);
}

/* nooit groter dan hoofdnieuws */
.news-slider .more-news {
  min-width: 300px;
  max-width: 300px;
}

.news-like {
  margin-top: 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  color: #ff4d4d;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news-like.liked {
  color: #e60000;
}


/* ============================= */
/* LOGO INTRO OVERLAY            */
/* ============================= */

/* Achtergrond iets vervagen */
body.intro-active > *:not(header) {
  filter: blur(5.5px);
  opacity: 0.75;
  transition: filter 1.2s ease, opacity 1.2s ease;
}

body.intro-active header {
  opacity: 0.85;
  transition: opacity 1.2s ease;
}

/* ============================= */
/* SOCIAL                        */
/* ============================= */
#social {
  margin: 60px auto;
  text-align: center;
}

.social-block {
  margin-top: 20px;
}

.facebook-embed {
  max-width: 340px;
  margin: 0 auto;
}

.facebook-news {
  max-width: 1100px;
  margin: 4rem auto;
  padding: 2rem;
  background: #f5f5f5;
  border-radius: 16px;
}

.facebook-news h2 {
  margin-bottom: 1.5rem;
}

.facebook-card {
  min-width: 340px;
  background: #fff;
  padding: 1rem;
}

.facebook-card h3 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* ==============================
   LIVE 
============================== */

.live-badge {
  background: var(--primary);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  margin-left: 10px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.main-news {
  border: 2px solid var(--primary);
}

.live-item {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
}

.live-item p {
  white-space: pre-line;
}

.live-item:not(:last-child) {
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

/* ==============================
   DECORATIEVE ANIMATIES UIT
============================== */
body.animations-off .snow,
body.animations-off .hearts,
body.animations-off .confetti,
body.animations-off .christmas {
  display: none !important;
}

body.animations-off .snowflake,
body.animations-off .animated,
body.animations-off .seasonal {
  animation: none !important;
}


/* ==========================
   SUBTIELE SNEEUW (VERBETERD)
========================== */

.snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  font-size: 20px; /* fallback */
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(110vh) translateX(20px);
  }
}

/* ❄ SNEEUW AAN / UIT */
.snow.hidden {
  display: none;
}

/* ========================================================= */
/* FOTOPAGINA (album uit Immich)                             */
/* ========================================================= */
.foto-raster {
  columns: 3 260px;
  column-gap: 14px;
  margin: 20px 0 60px;
}
.foto-raster button {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: #e9edf2;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
}
.foto-raster img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease;
}
.foto-raster button:hover img,
.foto-raster button:focus-visible img { transform: scale(1.03); }
.foto-raster button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.foto-leeg { column-span: all; color: #5b6f82; }

.foto-groot {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(10, 22, 34, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
}
.foto-groot[hidden] { display: none; }
.foto-groot figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: 100%; max-height: 100%; }
.foto-groot img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 6px; object-fit: contain; }
.foto-groot figcaption { color: #dbe6f0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.foto-groot button {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.foto-groot button:hover { background: var(--primary); }
.foto-groot button:focus-visible { outline: 3px solid var(--primary); }
.foto-sluit { top: 14px; right: 14px; }
.foto-pijl.vorige { left: 12px; top: 50%; transform: translateY(-50%); }
.foto-pijl.volgende { right: 12px; top: 50%; transform: translateY(-50%); }
body.foto-open { overflow: hidden; }
@media (max-width: 600px) {
  .foto-raster { columns: 2 140px; column-gap: 8px; }
  .foto-raster button { margin-bottom: 8px; }
  .foto-groot { padding: 56px 8px; }
  .foto-pijl.vorige, .foto-pijl.volgende { top: auto; bottom: 14px; transform: none; }
  .foto-pijl.vorige { left: calc(50% - 60px); }
  .foto-pijl.volgende { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .foto-raster img { transition: none; } }

/* ========================================================= */
/* TEKSTPAGINA'S (privacy- en cookieverklaring)              */
/* ========================================================= */
.tekst-blok { max-width: 860px; text-align: left; line-height: 1.65; padding-bottom: 60px; }
.tekst-blok h1 { margin-bottom: 4px; }
.tekst-blok h2 { margin-top: 32px; }
.tekst-blok p, .tekst-blok li { max-width: 72ch; }
.tekst-blok .bijgewerkt { color: #5b6f82; font-size: .9rem; margin-top: 0; }
.tabel-scroll { overflow-x: auto; margin: 12px 0; }
.privacy-tabel { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.privacy-tabel th, .privacy-tabel td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid #dfe5ec; }
.privacy-tabel th { background: #f3f4f6; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: .85rem; }
.footer-socials .footer-links a { font-size: .85rem; margin: 0; }
.footer-socials .footer-links a:hover { transform: none; }

/* privacy bij formulieren */
.privacy-akkoord { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: .92rem; text-align: left; line-height: 1.4; }
.privacy-akkoord input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.privacy-noot { font-size: .85rem; color: #5b6f82; margin: 14px 0 0; text-align: left; }

/* ========================================================= */
/* LOSSE PAGINA: NIEUWSBERICHT / RAADSPUNT + DELEN           */
/* ========================================================= */
.artikel .terug { margin: 0 0 8px; font-size: .95rem; }
.artikel-foto { width: 100%; max-height: 520px; object-fit: cover; border-radius: 12px; margin: 8px 0 16px; }
.artikel-tekst img { max-width: 100%; height: auto; border-radius: 10px; }

/* ========================================================= */
/* IN DE RAAD                                                */
/* ========================================================= */
.raad { text-align: left; padding-bottom: 40px; }
.raad-intro { max-width: 70ch; font-size: 1.05rem; }
.raad-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 22px 0 8px; }
.raad-filters label { font-weight: 600; }
.raad-filters select { padding: 8px 10px; border-radius: 8px; border: 1px solid #cfd8e2; font: inherit; max-width: 100%; }
.raad-soorten { display: flex; flex-wrap: wrap; gap: 6px; }
.raad-soorten button { border: 1px solid #cfd8e2; background: #fff; color: #0072ac; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .9rem; cursor: pointer; }
.raad-soorten button[aria-pressed="true"] { background: #0072ac; border-color: #0072ac; color: #fff; }

.raad-lijst { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.raad-lijst li > a { display: grid; grid-template-columns: 92px 1fr; gap: 6px 18px; padding: 16px 18px; background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.raad-lijst li > a:hover, .raad-lijst li > a:focus-visible { border-color: var(--primary); box-shadow: 0 4px 14px rgba(0, 60, 100, .08); }
.raad-datum { grid-row: span 3; color: #5b6f82; font-size: .9rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.raad-datum b { display: block; font-size: 1.5rem; color: #0072ac; }
.raad-lijst h3 { margin: 0; font-size: 1.1rem; text-wrap: balance; }
.raad-lijst p { margin: 0; color: #33506a; }
.raad-leeg { color: #5b6f82; padding: 12px 0; }
.raad-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.raad-soort, .raad-uitkomst, .raad-thema { display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.raad-soort { background: #e6f1f8; color: #0072ac; }
.raad-thema { background: #f3f4f6; color: #5b6f82; }
.raad-uitkomst { background: #f3f4f6; color: #5b6f82; }
.uitkomst-aangenomen, .uitkomst-beantwoord { background: #e5f4ec; color: #1f7a45; }
.uitkomst-verworpen { background: #fde8e8; color: #b4232a; }
.uitkomst-ingediend, .uitkomst-aangehouden { background: #fff1e6; color: #b25e00; }
.raad-knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn-licht { background: #fff !important; color: #0072ac !important; border: 2px solid #0072ac; }
.raad-documenten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.raad-inbreng-noot { background: #fff1e6; border-radius: 10px; padding: 10px 14px; }

.inbreng-openbaar, .inbreng-formulier { margin-top: 44px; }
.inbreng-lijst { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.inbreng-lijst li { background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; padding: 16px; display: grid; gap: 10px; align-content: start; }
.inbreng-lijst .inbreng-tekst { margin: 0; }
.inbreng-lijst .inbreng-meta { color: #5b6f82; font-size: .85rem; margin: 0; }
.inbreng-lijst .inbreng-actie { font-size: .9rem; margin: 0; }
.duimen { display: flex; gap: 8px; }
.duim { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfd8e2; background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .95rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.duim:hover { border-color: #0072ac; }
.duim[aria-pressed="true"] { background: #e6f1f8; border-color: #0072ac; color: #0072ac; font-weight: 600; }
.duim:disabled { opacity: .6; cursor: wait; }

.inbreng-formulier form { display: grid; gap: 14px; max-width: 760px; background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; padding: 20px; }
.inbreng-formulier label { display: grid; gap: 6px; font-weight: 600; }
.inbreng-formulier input[type="text"], .inbreng-formulier input[type="email"], .inbreng-formulier textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #cfd8e2; border-radius: 8px; width: 100%; box-sizing: border-box; }
.inbreng-formulier .privacy-akkoord { display: flex; font-weight: 400; }
.inbreng-formulier .btn { justify-self: start; }
.inbreng-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.optioneel { font-weight: 400; color: #5b6f82; }
.inbreng-bedankt { background: #e5f4ec; color: #1f7a45; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
@media (max-width: 600px) {
  .raad-lijst li > a { grid-template-columns: 1fr; }
  .raad-datum { grid-row: auto; }
  .raad-datum b { display: inline; font-size: 1rem; }
}

/* Knop "Terug naar home" bovenaan subpagina's */
.terug-home { margin: 0 0 16px; text-align: left; }
.terug-home a { display: inline-flex; align-items: center; border: 1px solid #cfd8e2; background: #fff; color: #0072ac; border-radius: 999px; padding: 6px 14px; font-size: .9rem; text-decoration: none; }
.terug-home a:hover, .terug-home a:focus-visible { background: var(--primary); border-color: var(--primary); color: #fff; }

/* =========================================================
   DEELKNOPPEN (popup, berichtpagina, raadspunt en tegels)
   Iconen: Font Awesome Free (CC BY 4.0)
========================================================= */
.deel-knoppen { margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid #dfe5ec; text-align: left; }
.news-modal .deel-knoppen { margin-top: 20px; }
.deel-label { display: block; font-weight: 600; margin: 0 0 10px; }
.deel-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.deel-knop { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 16px 9px 13px;
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1; color: #fff; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease; }
.deel-knop:hover, .deel-knop:focus-visible { transform: translateY(-1px); filter: brightness(.9); color: #fff; }
.deel-knop .icoon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.deel-wa { background: #128C7E; }
.deel-fb { background: #1877F2; }
.deel-li { background: #0A66C2; }
.deel-native { background: #006AA7; display: none; }
.kan-delen .deel-native { display: inline-flex; }
.deel-kopieer { background: #fff; color: #0072ac; box-shadow: inset 0 0 0 1px #cfd8e2; }
.deel-kopieer:hover, .deel-kopieer:focus-visible { color: #0072ac; }
.deel-kopieer .icoon + .icoon, .deel-kopieer.gekopieerd .icoon:first-child { display: none; }
.deel-kopieer.gekopieerd .icoon + .icoon { display: block; }
.deel-kopieer.gekopieerd { color: #128C7E; }

/* Deelknopje rechtsboven op een nieuwstegel */
.news-card { position: relative; }
.tegel-deel { position: absolute; top: 28px; right: 28px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.95); color: #006AA7; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: background .15s, color .15s; }
.tegel-deel:hover, .tegel-deel:focus-visible, .tegel-deel[aria-expanded="true"] { background: var(--primary); color: #fff; }
.tegel-deel .icoon { width: 17px; height: 17px; fill: currentColor; }
.tegel-deel-menu { position: absolute; top: 76px; right: 20px; z-index: 3; background: #fff; border-radius: 14px; padding: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); cursor: default; }
.tegel-deel-menu[hidden] { display: none; }
.tegel-deel-menu .deel-knoppen { margin: 0; padding: 0; border: 0; }
.tegel-deel-menu .deel-label, .tegel-deel-menu .deel-native { display: none !important; }
.tegel-deel-menu .deel-knop { width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0; }
.tegel-deel-menu .deel-knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================
   ONZE FRACTIE (pagina In de raad)
========================================================= */
.fractie { margin: 32px 0 44px; text-align: left; }
.fractie h2, .raad-kop { text-align: left; margin-bottom: 6px; }
.fractie-intro { margin: 0 0 18px; max-width: 70ch; }
.fractie-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 270px)); gap: 22px; }
.fractie-lijst li { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-radius: 15px;
  padding: 24px 18px 20px; box-shadow: 0 8px 20px rgba(0,0,0,.18); border-top: 4px solid var(--primary); }
.fractie-lijst img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: top; margin-bottom: 14px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(255,106,0,.35); }
.fractie-lijst h3 { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.fractie-rol { display: inline-block; background: var(--primary); color: #fff; font-weight: 600; font-size: .82rem; line-height: 1.3;
  padding: 4px 12px; border-radius: 999px; max-width: 100%; overflow-wrap: anywhere; }
.fractie-com { margin: 12px 0 0; font-size: .9rem; color: #4d5f70; overflow-wrap: anywhere; }
.fractie-com span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #8696a5; margin-bottom: 2px; }
.fractie-mail { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; background: #006AA7; color: #fff; text-decoration: none;
  font-weight: 600; font-size: .9rem; padding: 8px 16px; border-radius: 999px; transition: filter .15s, transform .15s; }
.fractie-mail:hover, .fractie-mail:focus-visible { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
@media (max-width: 600px) { .fractie-lijst { grid-template-columns: 1fr; } }
/* Wie de zetel in de gemeenteraad heeft: oranje rand rondom de hele tegel */
.fractie-lijst li.zetel { border: 3px solid var(--primary); box-shadow: 0 10px 26px rgba(255,106,0,.30); padding-top: 25px; }

/* =========================================================
   NIEUWSBRIEF: inschrijven (homepage en nieuwspagina) en uitkomstpagina's
========================================================= */
.nieuwsbrief-aanmelden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 36px; align-items: center; text-align: left; }
.nieuwsbrief-aanmelden h2 { margin-top: 0; }
.nb-aanmelden-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.nb-aanmelden-form label { display: grid; gap: 6px; font-weight: 600; }
.nb-aanmelden-form input[type="text"], .nb-aanmelden-form input[type="email"] { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid #cfd8e2; border-radius: 8px; width: 100%; box-sizing: border-box; }
.nb-aanmelden-form .privacy-akkoord { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.nb-aanmelden-form .btn { justify-self: start; margin: 0; }
.nb-aanmelden-form .optioneel { font-weight: 400; color: #5b6f82; }
.nb-uitkomst form { margin-top: 18px; }
@media (max-width: 760px) { .nieuwsbrief-aanmelden, .nb-aanmelden-form { grid-template-columns: 1fr; } }

/* =========================================================
   ONDERAAN DE HOMEPAGE: nieuwsbrief, lid worden en contact als drie blokken naast elkaar
========================================================= */
.onder-blokken { max-width: 1160px; margin: 40px auto; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 24px; align-items: stretch; }
.onder-blokken > .container { margin: 0; max-width: none; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.onder-blokken > .container h2 { margin-top: 0; }
.onder-blokken > .container > .btn { margin-top: auto; align-self: flex-start; }
.onder-blokken .nieuwsbrief-aanmelden { display: flex; }
.onder-blokken .nb-aanmelden-form { grid-template-columns: 1fr; gap: 10px; margin-top: auto; }
@media (max-width: 960px) {
  .onder-blokken { grid-template-columns: 1fr; gap: 0; }
  .onder-blokken > .container { margin: 20px 0; }
}

/* =========================================================
   PIJLKNOPPEN BIJ DE KANDIDATEN (homepage)
========================================================= */
.team-slider-wrapper .slider-btn { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; margin: 0; border-radius: 50%;
  background: #fff; color: var(--primary); border: 2px solid var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .2s, opacity .2s; }
.team-slider-wrapper .slider-btn svg { display: block; }
.team-slider-wrapper .slider-btn:hover:not(:disabled), .team-slider-wrapper .slider-btn:focus-visible { background: var(--primary); color: #fff; transform: scale(1.06); }
.team-slider-wrapper .slider-btn:focus-visible { outline: 3px solid #0072ac; outline-offset: 2px; }
.team-slider-wrapper .slider-btn:disabled { opacity: .35; cursor: default; box-shadow: none; transform: none; }
@media (max-width: 600px) { .team-slider-wrapper .slider-btn { flex-basis: 40px; width: 40px; height: 40px; } }
/* Nieuwspijltjes op de homepage in dezelfde stijl */
.news-slider-wrapper .slider-arrow { width: 48px; height: 48px; padding: 0; border-radius: 50%; background: #fff; color: var(--primary);
  border: 2px solid var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, opacity .2s; }
.news-slider-wrapper .slider-arrow svg { display: block; }
.news-slider-wrapper .slider-arrow:hover:not(:disabled), .news-slider-wrapper .slider-arrow:focus-visible { background: var(--primary); color: #fff; }
.news-slider-wrapper .slider-arrow:focus-visible { outline: 3px solid #0072ac; outline-offset: 2px; }
.news-slider-wrapper .slider-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
@media (max-width: 600px) { .news-slider-wrapper .slider-arrow { width: 40px; height: 40px; } .news-slider-wrapper .slider-arrow.left { left: 4px; } .news-slider-wrapper .slider-arrow.right { right: 4px; } }

/* =========================================================
   NIEUWSPOPUP: goed leesbaar (vaste balk, beperkte foto, leesbreedte)
========================================================= */
.news-modal .team-modal-content { max-width: 860px !important; width: 92% !important; max-height: 88vh; overflow-y: auto; padding: 0;
  text-align: left !important; font-size: 18px; line-height: 1.7; overscroll-behavior: contain; }
.nm-balk { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px 10px 28px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid #e3e9ef; }
.nm-meta { font-size: 15px; color: #5b6f82; }
.nm-sluit { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #eef2f6; color: #18324a; font-size: 30px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; transition: background .2s, color .2s; }
.nm-sluit:hover, .nm-sluit:focus-visible { background: var(--primary); color: #fff; }
.nm-sluit:focus-visible { outline: 3px solid #0072ac; outline-offset: 2px; }
/* foto bovenaan als brede banner */
.news-modal .team-modal-content img.nm-foto { display: block; width: 100%; height: 40vh; max-height: 420px; object-fit: cover; border-radius: 0; margin: 0; }
.nm-tekst { max-width: 68ch; margin: 0 auto; padding: 26px 28px 6px; color: var(--text-dark); } /* huisstijlblauw, contrast ±5:1 op wit */
.nm-tekst h2 { color: var(--primary); font-size: 32px; line-height: 1.2; margin: 0 0 18px; text-align: left; }
.nm-tekst p { margin: 0 0 1.1em; }
.nm-tekst a { color: var(--text-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.nm-tekst img { max-width: 100%; height: auto; border-radius: 10px; }
.nm-voet { max-width: 68ch; margin: 0 auto; padding: 0 28px 28px; }
.nm-voet .deel-knoppen { margin-top: 12px; }
.nm-pagina { display: inline-block; margin-top: 16px; font-size: 16px; color: #0072ac; font-weight: 600; text-decoration: none; }
.nm-pagina:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .news-modal { align-items: stretch; }
  .news-modal .team-modal-content { width: 100% !important; max-width: none !important; height: 100%; max-height: none; border-radius: 0; font-size: 17px; }
  .nm-balk { padding: 8px 10px 8px 18px; }
  .news-modal .team-modal-content img.nm-foto { height: 30vh; }
  .nm-tekst { padding: 20px 18px 4px; }
  .nm-tekst h2 { font-size: 26px; }
  .nm-voet { padding: 0 18px 28px; }
}
.news-modal .team-modal-content:focus { outline: none; }

/* =========================================================
   FORMULIEREN LID WORDEN EN CONTACT (popup, zelfde opbouw als de nieuwspopup)
========================================================= */
.form-modal .team-modal-content { max-width: 720px; width: 92%; max-height: 90vh; overflow-y: auto; padding: 0; text-align: left; overscroll-behavior: contain; }
.form-modal .team-modal-content:focus { outline: none; }
.fm-titel { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--primary); }
.fm { padding: 22px 28px 28px; display: grid; gap: 16px; color: var(--text-dark); }
.fm-intro { margin: 0; line-height: 1.55; }
.fm fieldset { border: 0; margin: 0; padding: 16px 0 0; border-top: 1px solid #e3e9ef; display: grid; gap: 12px; }
.fm legend { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; padding: 0 0 6px; color: var(--text-dark); }
.fm-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.fm-rij-adres { grid-template-columns: 1fr 1fr; max-width: 420px; }
.fm-veld { display: grid; gap: 6px; min-width: 0; }
.fm-smal { max-width: 280px; }
.fm-veld > label, .fm-label { font-weight: 600; font-size: .95rem; }
.fm-ster { color: var(--primary); font-weight: 700; }
.fm input:not([type=radio]):not([type=checkbox]), .fm textarea { font: inherit; font-size: 1rem; color: #18324a; background: #fff; width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 1.5px solid #cfd8e2; border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.fm textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.fm input:focus, .fm textarea:focus { outline: none; border-color: #0072ac; box-shadow: 0 0 0 3px rgba(0,114,172,.18); }
.fm input:user-invalid, .fm textarea:user-invalid, .fm-gecontroleerd input:invalid, .fm-gecontroleerd textarea:invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.fm-hulp { font-size: .85rem; color: #5b6f82; margin: 0; }
.fm-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-keuzes label { position: relative; cursor: pointer; }
.fm-keuzes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fm-keuzes span { display: inline-block; padding: 9px 16px; border: 1.5px solid #cfd8e2; border-radius: 999px; font-weight: 600; font-size: .95rem; background: #fff; transition: all .15s; }
.fm-keuzes input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.fm-keuzes input:focus-visible + span { outline: 3px solid #0072ac; outline-offset: 2px; }
.fm-keuzes label:hover span { border-color: var(--primary); }
.fm-gecontroleerd .fm-keuzes:has(input:invalid) span { border-color: #c0392b; }
.fm .privacy-akkoord { margin: 4px 0 0; }
.fm-verstuur { width: 100%; margin: 4px 0 0; }
.fm-verstuur:disabled { opacity: .7; cursor: wait; }
@media (max-width: 600px) {
  .form-modal { align-items: stretch; }
  .form-modal .team-modal-content { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .fm { padding: 18px 18px 28px; }
  .fm-rij { grid-template-columns: 1fr; }
  .fm-rij-adres { grid-template-columns: 1fr 1fr; max-width: none; }
  .fm-smal { max-width: none; }
}

/* =========================================================
   UITKOMSTPAGINA'S (bedankt, foutmelding formulier)
========================================================= */
.uitkomst { max-width: 760px; text-align: left; padding-bottom: 50px; }
.uitkomst h1 { color: var(--primary); margin: 10px 0 8px; }
.uitkomst h2 { font-size: 1.2rem; margin: 30px 0 12px; }
.uitkomst-icoon { width: 76px; height: 76px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 700; box-shadow: 0 8px 22px rgba(255,106,0,.35); }
.uitkomst-icoon.fout { background: #fff; color: var(--primary); border: 3px solid var(--primary); box-shadow: none; }
.uitkomst-intro { font-size: 1.1rem; line-height: 1.6; margin: 0; }
.uitkomst-stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: 12px; }
.uitkomst-stappen li { counter-increment: stap; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; align-items: start; }
.uitkomst-stappen li::before { content: counter(stap); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: #e6f1f8; color: #0072ac;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
.uitkomst-stappen b { padding-top: 6px; }
.uitkomst-stappen span { color: #4d6a82; line-height: 1.5; }
.uitkomst-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.btn-stil { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn.btn-stil:hover { background: var(--primary); color: #fff; }
.hulp-klein { font-size: .9rem; color: #5b6f82; }
/* de algemene formulierregels (form label/input) niet laten doorwerken in de nieuwe formulieren */
.fm label { margin-bottom: 0; }
.fm .privacy-akkoord, .fm .privacy-akkoord span { font-weight: 400; }
.fm-keuzes label { font-weight: 400; }

/* =========================================================
   MENUBALK: toegankelijk (contrast 4,6:1), huidige pagina zichtbaar, duidelijke focus
========================================================= */
nav { background: #C84E00; gap: 4px; padding: 10px 12px; align-items: center; }
nav a { color: #fff; font-size: 1.05rem; padding: 8px 12px; border-radius: 8px; position: relative; transition: background .15s; }
nav a:hover { color: #fff; background: rgba(0,0,0,.18); }
nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: #fff; }
nav a:focus-visible, nav .menu-knop:focus-visible { outline: 3px solid #fff; outline-offset: 2px; background: rgba(0,0,0,.18); }
nav a.nav-knop { background: #fff; color: #C84E00; margin-left: 8px; padding: 8px 18px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
nav a.nav-knop:hover { background: #fff3ea; color: #A84200; }
nav a.nav-knop:focus-visible { outline-color: #fff; background: #fff; }
nav a.nav-knop[aria-current]::after { display: none; }
/* verborgen link "Naar de inhoud": zichtbaar zodra hij focus krijgt */
.naar-inhoud { position: fixed; left: 12px; top: -60px; z-index: 10000; background: #fff; color: #C84E00; font-weight: 700; padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); text-decoration: none; transition: top .15s; }
.naar-inhoud:focus { top: 12px; outline: 3px solid #0072ac; outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
@media (max-width: 1100px) and (min-width: 769px) { nav a { font-size: .98rem; padding: 7px 9px; } nav a.nav-knop { margin-left: 4px; padding: 7px 14px; } }
@media (max-width: 980px) and (min-width: 769px) { nav { gap: 2px; padding: 8px; } nav a { font-size: .9rem; padding: 7px 7px; } nav a[aria-current="page"]::after { left: 7px; right: 7px; } nav a.nav-knop { padding: 7px 12px; } }
@media (max-width: 768px) {
  nav { padding: 0; gap: 0; align-items: stretch; }
  nav a { border-radius: 0; padding: 13px 16px; }
  nav a[aria-current="page"]::after { left: 50%; right: auto; width: 40px; transform: translateX(-50%); bottom: 6px; }
  nav.open a.nav-knop { margin: 10px 16px 14px; border-radius: 999px; }
}

/* =========================================================
   TOEGANKELIJKHEID: knop en paneel (opgebouwd door app.js)
========================================================= */
.accessibility-slider { position: fixed; bottom: 20px; right: 20px; z-index: 10001; font-family: var(--font-main); }
#accessibilityTab { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; background: #C84E00; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .15s, background .15s; padding: 0; }
#accessibilityTab:hover { background: #A84200; transform: scale(1.05); }
#accessibilityTab:focus-visible { outline: 3px solid #0072ac; outline-offset: 3px; }
.toeg-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accessibility-panel { position: absolute; bottom: 72px; right: 0; width: 310px; max-height: calc(100vh - 120px); overflow-y: auto; background: #fff; color: #18324a;
  border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.28); padding: 0 0 12px; text-align: left; }
.accessibility-panel[hidden] { display: none; }
.toeg-kop { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px 16px; border-bottom: 1px solid #e3e9ef; position: sticky; top: 0; background: #fff; }
.toeg-kop h2 { margin: 0; font-size: 1.1rem; color: #18324a; }
.toeg-sluit { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #eef2f6; color: #18324a; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 0 3px; }
.toeg-sluit:hover { background: #dde5ec; }
.accessibility-panel button:focus-visible { outline: 3px solid #0072ac; outline-offset: 2px; }
.toeg-groep { padding: 12px 16px 6px; }
.toeg-groep-titel { display: block; font-weight: 700; font-size: .95rem; margin-bottom: 8px; }
.toeg-grootte { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border: 2px solid #C84E00; border-radius: 10px; overflow: hidden; }
.toeg-grootte button { border: 0; background: #fff; color: #C84E00; font: inherit; font-weight: 700; font-size: 1.05rem; padding: 10px 0; cursor: pointer; }
.toeg-grootte button + button { border-left: 2px solid #C84E00; }
.toeg-grootte button:hover:not(:disabled) { background: #fff3ea; }
.toeg-grootte button:disabled { color: #b9a596; cursor: default; }
.toeg-grootte .toeg-pct { color: #18324a; font-size: .95rem; }
.toeg-schakel { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 16px; border: 0; border-top: 1px solid #eef2f6;
  background: none; text-align: left; cursor: pointer; font: inherit; color: #18324a; }
.toeg-schakel:hover { background: #f6f8fa; }
.toeg-tekst { display: grid; gap: 2px; }
.toeg-tekst b { font-size: .98rem; }
.toeg-tekst small { font-size: .82rem; color: #4d6a82; }
.toeg-switch { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #c5cfd9; position: relative; transition: background .15s; }
.toeg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.toeg-schakel[aria-pressed="true"] .toeg-switch { background: #C84E00; }
.toeg-schakel[aria-pressed="true"] .toeg-switch::after { left: 21px; }
.toeg-actie { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 32px); margin: 10px 16px 0; padding: 11px; border: 0; border-radius: 10px;
  background: #C84E00; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.toeg-actie:hover { background: #A84200; }
.toeg-terug { display: block; margin: 10px auto 0; background: none; border: 0; color: #0072ac; text-decoration: underline; font: inherit; font-size: .9rem; cursor: pointer; }
@media (max-width: 600px) { .accessibility-slider { bottom: 14px; right: 14px; } #accessibilityTab { width: 52px; height: 52px; } .accessibility-panel { width: min(310px, calc(100vw - 28px)); bottom: 64px; } }

/* --- tekstgrootte: de hele pagina schaalt mee (ook teksten met vaste px-maten) --- */
html.toeg-zoom body { zoom: var(--toeg-zoom); width: calc(100vw / var(--toeg-zoom)); overflow-x: clip; } /* smaller opbouwen, zodat het na vergroten precies past */
html.toeg-zoom header, html.toeg-zoom nav, html.toeg-zoom footer { max-width: calc(100vw / var(--toeg-zoom)); box-sizing: border-box; }
html.toeg-zoom .accessibility-slider { zoom: calc(1 / var(--toeg-zoom)); } /* paneel zelf niet mee vergroten */

/* --- makkelijker lezen --- */
html.toeg-leesbaar body { letter-spacing: .03em; word-spacing: .12em; }
html.toeg-leesbaar p, html.toeg-leesbaar li, html.toeg-leesbaar .nm-tekst, html.toeg-leesbaar label { line-height: 1.9 !important; }

/* --- links onderstrepen --- */
html.toeg-links a:not(.btn):not(.nav-knop):not(.deel-knop) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }

/* --- hoog contrast: donkere tekst op wit, effen vlakken, duidelijke randen --- */
html.toeg-contrast body { background: #fff !important; }
html.toeg-contrast body::before { display: none !important; }
html.toeg-contrast body :where(*:not(svg, path, circle)) { color: #0b1f33 !important; text-shadow: none !important; } /* :where = geen specificiteit, zodat de uitzonderingen hieronder winnen */
html.toeg-contrast header { background: #fff !important; border-bottom: 4px solid #0b1f33 !important; }
html.toeg-contrast .container, html.toeg-contrast .team-card, html.toeg-contrast .team-modal-content, html.toeg-contrast .fractie-lijst li { background: #fff !important; border: 2px solid #0b1f33 !important; box-shadow: none !important; }
html.toeg-contrast a { color: #0033a0 !important; text-decoration: underline !important; }
html.toeg-contrast nav { background: #0b1f33 !important; }
html.toeg-contrast nav a, html.toeg-contrast nav .menu-knop { color: #fff !important; }
html.toeg-contrast nav a[aria-current="page"]::after { background: #ffd23f !important; }
html.toeg-contrast nav a.nav-knop { background: #ffd23f !important; color: #0b1f33 !important; text-decoration: none !important; }
html.toeg-contrast .btn, html.toeg-contrast .fm-verstuur, html.toeg-contrast .deel-knop, html.toeg-contrast #steunTab, html.toeg-contrast .toeg-actie,
html.toeg-contrast #accessibilityTab, html.toeg-contrast .uitkomst-icoon, html.toeg-contrast .nb-aanmelden-form .btn { background: #0b1f33 !important; color: #fff !important; border: 2px solid #0b1f33 !important; text-decoration: none !important; }
html.toeg-contrast .btn *, html.toeg-contrast .deel-knop *, html.toeg-contrast #steunTab *, html.toeg-contrast .toeg-actie * { color: #fff !important; }
html.toeg-contrast .btn.btn-stil { background: #fff !important; color: #0b1f33 !important; }
html.toeg-contrast .slider-btn, html.toeg-contrast .slider-arrow, html.toeg-contrast .tegel-deel, html.toeg-contrast .nm-sluit { background: #fff !important; border: 2px solid #0b1f33 !important; }
html.toeg-contrast input, html.toeg-contrast textarea, html.toeg-contrast select { border: 2px solid #0b1f33 !important; background: #fff !important; }
html.toeg-contrast .fm-keuzes input:checked + span { background: #0b1f33 !important; color: #fff !important; }
html.toeg-contrast footer { background: #0b1f33 !important; }
html.toeg-contrast footer *, html.toeg-contrast footer a { color: #fff !important; }
html.toeg-contrast .toeg-schakel[aria-pressed="true"] .toeg-switch { background: #0b1f33 !important; }
html.toeg-contrast .toeg-grootte, html.toeg-contrast .toeg-grootte button + button { border-color: #0b1f33 !important; }
html.toeg-contrast .snow { display: none !important; }
html.toeg-zoom { overflow-x: clip; }
html.toeg-zoom :is(h1, h2, h3, p, li, label, a, span) { overflow-wrap: break-word; }
html.toeg-zoom .team-top .team-card, html.toeg-zoom #verkiezingsprogramma li { min-width: 0; max-width: 100%; box-sizing: border-box; }
html.toeg-zoom #steunSlider { zoom: calc(1 / var(--toeg-zoom)); } /* het lipje "Steun ons" niet mee vergroten, anders bedekt het de tekst */
html.toeg-zoom .team-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }