/* ==========================================================================
   Alpha Hardenberg — Christengemeente de Wegwijzer
   Vormentaal gebaseerd op het Wegwijzer-webdesign:
   zwarte header, gekleurde tabstrip, vette cursieve koppen,
   pill-knoppen met rond icoon en zachte kleurvlakken die rouleren.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Merkkleuren (officieel, uit de logobestanden) */
  --red: #e73634;
  --amber: #f8ac3c;
  --cyan: #23b8d0;
  --ink: #1c1111;
  --black: #141011;

  /* Donkere varianten — voor tekst en knoppen, zodat het contrast voldoet
     aan WCAG AA. De merkkleuren zelf zijn te licht voor tekst op wit. */
  --red-ink: #c62a28;
  --amber-ink: #a35400;
  --cyan-ink: #14707f;
  --red-btn: #d92d2b;

  /* Zachte kleurvlakken (merkkleur op wit) */
  --red-soft: #fbe1e0;
  --amber-soft: #feeed8;
  --cyan-soft: #d3f1f6;

  /* Nog lichtere tinten, voor ronde badges */
  --red-tint: #fdf0ef;
  --amber-tint: #fef7ec;
  --cyan-tint: #eafafc;

  /* Neutralen */
  --white: #ffffff;
  --grey-50: #f7f6f5;
  --grey-100: #f0efed;
  --grey-200: #e6e4e1;
  --grey-300: #d3d0cc;
  --grey-500: #767370;
  --grey-600: #5f5c59;
  --grey-700: #403d3a;

  /* Semantisch */
  --bg: var(--white);
  --text: var(--ink);
  --text-muted: var(--grey-600);
  --text-subtle: var(--grey-500);
  --border: var(--grey-200);

  /* Typografie */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --fs-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --fs-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --fs-3xl: clamp(2.125rem, 4vw + 1rem, 3.5rem);
  --lh-tight: 1.1;
  --lh-snug: 1.35;
  --lh-base: 1.65;

  /* Ruimte */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Vorm */
  --radius-pill: 99px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-sm: 0 6px 20px rgba(20, 16, 17, 0.05);
  --shadow-md: 0 16px 40px rgba(20, 16, 17, 0.1);
  --shadow-lg: 0 24px 60px rgba(20, 16, 17, 0.2);

  /* Layout */
  --container: 1120px;
  --container-narrow: 800px;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Halve hoogte van een tabblad: zoveel steken de gekleurde blokken
     boven hun eigen doosje uit (zie .tabstrip__list). */
  --tab-lift: 1.5625rem;
}

/* --------------------------------------------------------------------------
   2. Reset & basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Koppen zijn vet én cursief — het handelsmerk van deze huisstijl. */
h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  font-style: italic;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-3xl);
}
h2 {
  font-size: var(--fs-2xl);
}
h3 {
  font-size: var(--fs-xl);
}

h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
}

/* Rechte variant voor rustiger tussenkopjes */
.h-upright {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

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

a {
  color: var(--cyan-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

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

ul,
ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
}

li + li {
  margin-top: var(--space-2);
}

code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--grey-100);
  /* Eigen kleur, want de grijze tekst eromheen is te licht op dit vlakje */
  color: var(--grey-700);
  font-size: 0.9em;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

/* --------------------------------------------------------------------------
   3. Layout-helpers
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2.5rem, var(--container-narrow));
}

.section {
  padding-block: var(--space-8);
}

@media (min-width: 48rem) {
  .section {
    padding-block: var(--space-9);
  }
}

.section--tight {
  padding-block: var(--space-7);
}

.section--grey {
  background: var(--grey-50);
}

.section--cyan {
  background: var(--cyan-soft);
}

.section--dark {
  background: var(--black);
  color: var(--grey-200);
}

.section--dark h2,
.section--dark h3 {
  color: var(--white);
}

.section--dark a:not(.btn) {
  color: var(--cyan);
}

.section-head {
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.text-center {
  text-align: center;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 999;
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

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

/* --------------------------------------------------------------------------
   4. Eyebrow met streepje — "LOC Hardenberg —— Iedere zondag 10:00u"
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-muted);
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  display: none;
}

.eyebrow__rule {
  display: block;
  width: 3.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
}

.eyebrow--red .eyebrow__rule {
  background: var(--red);
}
.eyebrow--cyan .eyebrow__rule {
  background: var(--cyan);
}

.eyebrow--left {
  justify-content: flex-start;
}

.eyebrow--onDark {
  color: var(--white);
}

/* Klein label in kapitalen, voor boven secties */
.label {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-ink);
}

.label--red {
  color: var(--red-ink);
}
.label--amber {
  color: var(--amber-ink);
}
.label--onDark {
  color: var(--amber);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.section--dark .lead {
  color: var(--grey-300);
}

/* --------------------------------------------------------------------------
   5. Knoppen — pill met rond icoon-badge
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

/* Zonder icoon: symmetrische padding */
.btn:not(:has(.btn__icon)) {
  padding: 0.6875rem 1.5rem;
}

.btn:hover {
  color: var(--white);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
}

.btn__icon svg {
  width: 1rem;
  height: 1rem;
}

/* Zwarte knop met gekleurd icoon */
.btn--dark .btn__icon {
  background: var(--cyan);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--grey-700);
}

/* Rood */
.btn--red {
  background: var(--red-btn);
}
.btn--red:hover {
  background: #b02522;
}
.btn--red .btn__icon {
  background: var(--white);
  color: var(--red-btn);
}

/* Amber en cyaan krijgen donkere tekst: wit haalt het contrast niet. */
.btn--amber {
  background: var(--amber);
  color: var(--ink);
}
.btn--amber:hover {
  background: #e79a22;
  color: var(--ink);
}
.btn--amber .btn__icon {
  background: var(--white);
  color: var(--amber-ink);
}

.btn--cyan {
  background: var(--cyan);
  color: var(--ink);
}
.btn--cyan:hover {
  background: #1ba3b9;
  color: var(--ink);
}
.btn--cyan .btn__icon {
  background: var(--white);
  color: var(--cyan-ink);
}

/* Omlijnd */
.btn--outline {
  background: transparent;
  border-color: var(--grey-300);
  color: var(--ink);
}
.btn--outline:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--outline .btn__icon {
  background: var(--grey-100);
  color: var(--ink);
}

.section--dark .btn--outline,
.cta .btn--outline {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.section--dark .btn--outline:hover,
.cta .btn--outline:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.btn--sm {
  gap: var(--space-2);
  padding: 0.3125rem 1.125rem 0.3125rem 0.3125rem;
  font-size: var(--fs-sm);
}

.btn--sm:not(:has(.btn__icon)) {
  padding: 0.4375rem 1.125rem;
}

.btn--sm .btn__icon {
  width: 1.625rem;
  height: 1.625rem;
}

.btn--sm .btn__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn-row--center {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   6. Header — zwarte balk + gekleurde tabstrip
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--black);
}

/* Op mobiel bestaan de gekleurde blokken niet (die zitten in het uitklapmenu),
   dus blijft de zwarte balk hangen. Anders is het menuknopje onbereikbaar
   zodra je een stukje naar beneden hebt gescrold. */
@media (max-width: 61.999rem) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .has-scrolled .site-header {
    box-shadow: 0 6px 20px rgb(20 16 17 / 0.22);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--white);
}

.brand:hover {
  color: var(--white);
}

.brand__icon {
  width: 2.25rem;
  height: auto;
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__name {
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand__sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--grey-300);
}

/* Rechterkant van de zwarte balk */
.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 62rem) {
  .site-header__actions {
    display: flex;
  }
}

.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
}

.lang-switch__link {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  color: var(--grey-300);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.lang-switch__link:hover {
  color: var(--white);
}

.lang-switch__link[aria-current="true"] {
  background: var(--white);
  color: var(--ink);
}

/* Contact-pill met groen stipje, net als in het ontwerp */
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}

.contact-pill:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.contact-pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #35d07f;
}

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  transform: translateY(-6px);
}
.nav-toggle__bars::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

@media (min-width: 62rem) {
  .nav-toggle {
    display: none;
  }
}

/* Gekleurde tabstrip die half over de zwarte balk heen valt.
   Staat als los blok direct ná de header in de HTML. */
.tabstrip {
  position: relative;
  z-index: 110;
  display: none;
}

@media (min-width: 62rem) {
  .tabstrip {
    display: block;
    /* De lijst wordt half omhoog geschoven, dus de helft van een tab steekt
       onder de zwarte balk uit. Deze hoogte bepaalt hoeveel witruimte daar
       nog onder valt; zonder dit blijft er een te brede witte strook staan. */
    height: 2.375rem;

    /* Alleen de gekleurde blokken blijven hangen; de zwarte balk erboven
       scrollt gewoon weg. De blokken steken een halve taphoogte (25px) boven
       hun eigen doosje uit, dus die tellen we bij de afstand tot de bovenkant
       op. Anders zou de bovenste helft buiten beeld vallen. */
    position: sticky;
    top: calc(var(--tab-lift) + 0.75rem);
  }

  /* Zodra ze los van de zwarte balk komen, krijgen de blokken een schaduw
     zodat ze duidelijk boven de tekst zweven. */
  .has-scrolled .tabstrip__list {
    filter: drop-shadow(0 8px 18px rgb(20 16 17 / 0.28));
  }
}

.tabstrip__list {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
}

.tabstrip__list li + li {
  margin-top: 0;
}

.tab {
  display: block;
  padding: 0.6875rem 1.75rem;
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transition), filter var(--transition);
}

/* Speels: bij hover zakt de balk iets naar beneden */
.tab:hover,
.tab:focus-visible {
  transform: translateY(4px);
}

.tab--red {
  background: var(--red-btn);
  color: var(--white);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.tab--red:hover {
  color: var(--white);
}

.tab--amber {
  background: var(--amber);
  color: var(--ink);
}
.tab--amber:hover {
  color: var(--ink);
}

.tab--cyan {
  background: var(--cyan);
  color: var(--ink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tab--cyan:hover {
  color: var(--ink);
}

.tab[aria-current="page"] {
  box-shadow: inset 0 -4px 0 rgba(20, 16, 17, 0.35);
}

/* Mobiel menu */
.site-nav {
  display: none;
}

.site-nav.is-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--space-4) 1.25rem var(--space-6);
  background: var(--black);
  box-shadow: var(--shadow-lg);
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.site-nav__list li + li {
  margin-top: 0;
}

.site-nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-left: 4px solid transparent;
}

.site-nav__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.site-nav__link--red {
  border-left-color: var(--red);
}
.site-nav__link--amber {
  border-left-color: var(--amber);
}
.site-nav__link--cyan {
  border-left-color: var(--cyan);
}

.site-nav__link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
}

.site-nav__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 62rem) {
  .site-nav,
  .site-nav.is-open {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-8) var(--space-7);
  text-align: center;
}

.hero h1 {
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.hero__lead {
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.hero__actions {
  margin-top: var(--space-6);
}

/* Paginakop voor subpagina's: donker vlak met afgeronde hoeken */
.page-hero {
  padding-top: var(--space-6);
}

.page-hero__panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--black);
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  color: var(--white);
  text-align: center;
}

/* Donkere waas zodat de tekst leesbaar blijft zodra er een foto in staat.
   Is een foto van zichzelf al licht? Zet dan --hero-shade wat hoger (0 tot
   0.3), dan wordt de waas sterker en blijft de witte tekst goed leesbaar. */
.page-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(20 16 17 / calc(0.62 + var(--hero-shade, 0))),
    rgb(20 16 17 / calc(0.82 + var(--hero-shade, 0)))
  );
  opacity: var(--hero-overlay, 0);
}

/* Met een foto erin is het watermerk te druk */
.page-hero__panel[style*="hero-image"] .page-hero__watermark {
  display: none;
}

.page-hero__watermark {
  position: absolute;
  right: -3rem;
  bottom: -6rem;
  width: 16rem;
  opacity: 0.12;
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
}

.page-hero h1 {
  margin-bottom: 0;
  color: var(--white);
}

.page-hero__lead {
  max-width: 58ch;
  margin: var(--space-5) auto 0;
  color: var(--grey-200);
}

/* --------------------------------------------------------------------------
   8. Streep-element achter foto's (zoals op Instagram van De Wegwijzer)
   -------------------------------------------------------------------------- */
.framed {
  position: relative;
  display: inline-block;
  width: 100%;
}

.framed::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  bottom: -0.75rem;
  width: 45%;
  height: 55%;
  border-radius: var(--radius-md);
  background: var(--frame-color, var(--cyan));
  z-index: 0;
}

.framed > * {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-md);
}

.framed--amber {
  --frame-color: var(--amber);
}
.framed--red {
  --frame-color: var(--red);
}

/* --------------------------------------------------------------------------
   9. Video (click-to-load, privacyvriendelijk)
   -------------------------------------------------------------------------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--black);
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video__facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  border: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  cursor: pointer;
}

.video__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity var(--transition), transform var(--transition);
}

.video__facade:hover .video__thumb {
  opacity: 0.85;
  transform: scale(1.03);
}

/* Grote witte ronde afspeelknop, zoals in het ontwerp */
.video__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
}

.video__facade:hover .video__play {
  transform: scale(1.08);
}

.video__play svg {
  width: 1.875rem;
  height: 1.875rem;
  margin-left: 4px;
  color: var(--black);
}

.video__label {
  position: relative;
  max-width: 34ch;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
}

.video-note {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Kaarten
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40rem) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56rem) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Zacht gekleurde kaart — kleur rouleert via .card--red/amber/cyan */
.card {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--card-soft, var(--grey-50));
}

.card--red {
  --card-soft: var(--red-soft);
  --card-ink: var(--red-ink);
  --card-solid: var(--red);
}
.card--amber {
  --card-soft: var(--amber-soft);
  --card-ink: var(--amber-ink);
  --card-solid: var(--amber);
}
.card--cyan {
  --card-soft: var(--cyan-soft);
  --card-ink: var(--cyan-ink);
  --card-solid: var(--cyan);
}

.card__meta {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--card-ink, var(--cyan-ink));
}

.card h3,
.card h4 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card p {
  font-size: var(--fs-base);
  color: var(--grey-700);
}

/* Ronde, gevulde icoonknop rechtsboven in de kaart */
.card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--card-solid, var(--cyan));
  color: var(--white);
}

.card__badge svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card--withBadge {
  padding-right: 4.5rem;
}

/* Witte kaart met rand */
.card--plain {
  background: var(--white);
  border: 1px solid var(--border);
}

/* Stappen 1-2-3, met foto en een nummer dat over de hoek valt */
.steps {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 56rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.step {
  position: relative;
}

.step__media {
  position: relative;
  margin-bottom: var(--space-5);
}

.step__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.step__num {
  position: absolute;
  left: -0.625rem;
  bottom: -0.875rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--step-color, var(--cyan));
  color: var(--white);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(20, 16, 17, 0.18);
}

.step--red {
  --step-color: var(--red);
}
.step--amber {
  --step-color: var(--amber);
}
.step--cyan {
  --step-color: var(--cyan);
}

/* Op amber en cyaan is witte tekst te licht */
.step--amber .step__num,
.step--cyan .step__num {
  color: var(--ink);
}

.step h3 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
}

.step p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. Info-pills (locatie / tijd / kosten)
   -------------------------------------------------------------------------- */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pill-row--center {
  justify-content: center;
}

.info-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-md);
  background: var(--pill-soft, var(--grey-100));
  color: var(--grey-700);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
}

.info-pill svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--pill-ink, var(--ink));
}

a.info-pill:hover {
  color: var(--ink);
  filter: brightness(0.97);
}

.info-pill--red {
  --pill-soft: var(--red-soft);
  --pill-ink: var(--red-ink);
}
.info-pill--amber {
  --pill-soft: var(--amber-soft);
  --pill-ink: var(--amber-ink);
}
.info-pill--cyan {
  --pill-soft: var(--cyan-soft);
  --pill-ink: var(--cyan-ink);
}

/* --------------------------------------------------------------------------
   12. Agenda
   -------------------------------------------------------------------------- */
/* Eén kolom, chronologisch onder elkaar */
.agenda {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agenda li + li {
  margin-top: 0;
}

.agenda-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5) 4.75rem var(--space-5) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--item-soft, var(--grey-50));
}

/* --item-flag is de kleur achter een labeltje met witte tekst. Voor rood is
   dat een tint donkerder dan de merkkleur, anders haalt wit het contrast net
   niet. Amber en cyaan krijgen donkere tekst, dus die mogen de merkkleur zijn. */
.agenda-item--red {
  --item-soft: var(--red-soft);
  --item-ink: var(--red-ink);
  --item-solid: var(--red);
  --item-flag: var(--red-btn);
}
.agenda-item--amber {
  --item-soft: var(--amber-soft);
  --item-ink: var(--amber-ink);
  --item-solid: var(--amber);
  --item-flag: var(--amber);
}
.agenda-item--cyan {
  --item-soft: var(--cyan-soft);
  --item-ink: var(--cyan-ink);
  --item-solid: var(--cyan);
  --item-flag: var(--cyan);
}

.agenda-item__date {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--item-ink, var(--cyan-ink));
}

.agenda-item__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.agenda-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--grey-600);
}

.agenda-item__note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--grey-700);
}

.agenda-item__ics {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--item-solid, var(--cyan));
  color: var(--white);
  cursor: pointer;
  transition: transform var(--transition), filter var(--transition);
}

.agenda-item--amber .agenda-item__ics,
.agenda-item--cyan .agenda-item__ics {
  color: var(--ink);
}

.agenda-item__ics:hover {
  transform: scale(1.08);
}

.agenda-item__ics svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Statussen */
.agenda-item.is-next {
  outline: 3px solid var(--item-solid, var(--cyan));
  outline-offset: 3px;
}

.agenda-item__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.agenda-item__flag {
  display: inline-flex;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agenda-item__flag--tag {
  background: var(--item-flag, var(--cyan));
  color: var(--white);
}

.agenda-item--amber .agenda-item__flag--tag,
.agenda-item--cyan .agenda-item__flag--tag {
  color: var(--ink);
}

/* Tussenregel "geen Alpha deze week": wel opvallend, maar duidelijk geen
   bijeenkomst — vandaar de gestreepte rand. */
.agenda-item--break {
  border: 1px dashed var(--amber);
}

.agenda-item.is-past {
  opacity: 0.5;
}

.agenda-item.is-past .agenda-item__title {
  text-decoration: line-through;
}

/* Tussenregel "geen Alpha deze week" */
.agenda-item--break {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.agenda-item--break .agenda-item__title {
  font-size: var(--fs-base);
  font-weight: 700;
}

.agenda-item--break .agenda-item__note {
  flex-basis: 100%;
}

.agenda-loading,
.agenda-error {
  padding: var(--space-5);
  border: 1px dashed var(--grey-300);
  border-radius: var(--radius-md);
  color: var(--text-subtle);
  text-align: center;
}

/* Alvast wat ruimte reserveren, zodat de pagina niet opspringt zodra de
   agenda geladen is. Bewust een globale schatting en geen exact getal per
   pagina: dan hoeft er niets bijgewerkt te worden als er een datum bij komt. */
.agenda-loading {
  display: grid;
  place-items: center;
  min-height: 22rem;
}

.agenda-error {
  border-color: var(--red-soft);
  background: var(--red-tint);
  color: var(--red-ink);
}

/* --------------------------------------------------------------------------
   13. FAQ — gekleurde cursieve vragen, kleur rouleert
   -------------------------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-lg);
  font-style: italic;
  font-weight: 800;
  color: var(--faq-ink, var(--cyan-ink));
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item:nth-child(3n + 1) {
  --faq-ink: var(--amber-ink);
  --faq-tint: var(--amber-tint);
}
.faq-item:nth-child(3n + 2) {
  --faq-ink: var(--cyan-ink);
  --faq-tint: var(--cyan-tint);
}
.faq-item:nth-child(3n + 3) {
  --faq-ink: var(--red-ink);
  --faq-tint: var(--red-tint);
}

/* Ronde badge met chevron */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--faq-tint, var(--cyan-tint))
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    center / 1.125rem no-repeat;
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item summary:hover {
  background: var(--faq-tint, var(--cyan-tint));
}

.faq-item__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--grey-700);
}

/* --------------------------------------------------------------------------
   14. Formulier-embed
   -------------------------------------------------------------------------- */
/* Zolang er nog toestemming gevraagd wordt, is dit een kaartje. */
.form-embed {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* Zodra het formulier geladen is, verdwijnt het kader: Google Forms heeft
   zelf al een witte achtergrond, dus zo staat het naadloos in de pagina. */
.form-embed--loaded {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.form-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Google Forms kan de hoogte van een ingesloten formulier niet doorgeven,
   dus zetten we die zelf. Het formulier wordt langer naarmate het smaller
   is, want dan stapelen de velden. Deze waarden zijn opgemeten per breedte
   met wat marge erbij, zodat er géén scrollbalk in het formulier verschijnt.
   Staat er ooit toch een? Verhoog dan de betreffende waarde in de HTML. */
.form-embed iframe {
  height: var(--form-h-xs, 2900px);
}

@media (min-width: 25rem) {
  .form-embed iframe {
    height: var(--form-h-sm, 2750px);
  }
}

@media (min-width: 33.75rem) {
  .form-embed iframe {
    height: var(--form-h-md, 2600px);
  }
}

@media (min-width: 52.5rem) {
  .form-embed iframe {
    height: var(--form-h-lg, 2480px);
  }
}

.embed-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.embed-consent__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--cyan);
  color: var(--white);
}

.embed-consent__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.embed-consent h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
}

.embed-consent p {
  max-width: 48ch;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.embed-consent .btn {
  margin-top: var(--space-5);
}

.embed-consent__alt {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

.form-note {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--cyan-soft);
  font-size: var(--fs-base);
  color: var(--grey-700);
}

.form-note svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--cyan-ink);
}

.form-note p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   13b. Ontdek Alpha: nieuws- en verhaalkaarten
   -------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 40rem) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 62rem) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-md);
  background: var(--card-soft, var(--grey-50));
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.news-card__media {
  position: relative;
  margin: 0;
}

.news-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.news-card__date {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--card-ink, var(--cyan-ink));
}

.news-card__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* De hele kaart is klikbaar, maar in de code blijft het één nette link */
.news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-card {
  position: relative;
}

.news-card__title a {
  color: inherit;
  text-decoration: none;
}

.news-card__title a:hover {
  color: var(--card-ink, var(--cyan-ink));
}

.news-card__intro {
  flex: 1;
  margin-bottom: var(--space-5);
  font-size: var(--fs-base);
  color: var(--grey-700);
}

.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  font-weight: 700;
  color: var(--card-ink, var(--cyan-ink));
}

.news-card__more svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--transition);
}

.news-card:hover .news-card__more svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   13c. Artikelpagina
   -------------------------------------------------------------------------- */
.article {
  max-width: 44rem;
  margin-inline: auto;
}

.article__media {
  margin: 0 0 var(--space-6);
}

.article__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--cyan-ink);
}

.article__intro {
  margin-bottom: var(--space-6);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--grey-700);
}

.article__body p {
  margin-bottom: var(--space-5);
}

.article__links {
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--cyan-soft);
  list-style: none;
}

.article__links li + li {
  margin-top: var(--space-3);
}

.article__links a {
  font-weight: 600;
}

.article-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   14b. Uitnodigen / delen
   -------------------------------------------------------------------------- */
.invite {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--amber-soft);
}

@media (min-width: 56rem) {
  .invite {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-7);
  }
}

.invite h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-3);
}

.invite p {
  color: var(--grey-700);
  font-size: var(--fs-base);
}

.invite .btn-row {
  align-content: start;
}

/* Terugkoppeling na "link kopiëren" */
.copy-feedback {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--amber-ink);
}

.copy-feedback[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   15. CTA-blok
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--black);
  color: var(--grey-200);
  text-align: center;
}

@media (min-width: 48rem) {
  .cta {
    padding: var(--space-8);
  }
}

.cta h2 {
  max-width: 22ch;
  margin-inline: auto;
  color: var(--white);
}

.cta p {
  max-width: 50ch;
  margin-inline: auto;
  color: var(--grey-300);
}

.cta .btn-row {
  margin-top: var(--space-6);
}

.cta__watermark {
  position: absolute;
  right: -3.5rem;
  bottom: -5rem;
  width: 18rem;
  opacity: 0.14;
  pointer-events: none;
}

.cta__inner {
  position: relative;
}

/* --------------------------------------------------------------------------
   16. Contactkaart
   -------------------------------------------------------------------------- */
.contact-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--cyan-soft);
}

@media (min-width: 48rem) {
  .contact-card {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.contact-list li:last-child {
  margin-bottom: 0;
}

.contact-list svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--cyan-ink);
}

/* --------------------------------------------------------------------------
   16b. Cookiebalk
   -------------------------------------------------------------------------- */
.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  padding: var(--space-4);
  animation: cookiebar-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes cookiebar-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookiebar {
    animation: none;
  }
}

.cookiebar__inner {
  display: grid;
  gap: var(--space-5);
  width: min(100%, 60rem);
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--black);
  color: var(--grey-200);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 48rem) {
  .cookiebar__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-7);
  }
}

.cookiebar h2 {
  margin-bottom: var(--space-2);
  color: var(--white);
  font-size: var(--fs-lg);
}

.cookiebar p {
  margin: 0;
  font-size: var(--fs-base);
}

.cookiebar__note {
  margin-top: var(--space-2) !important;
  font-size: var(--fs-sm);
  /* Bewust iets lichter dan de hoofdtekst, maar nog steeds ruim leesbaar
     op de zwarte balk (contrast 6.6:1). */
  color: #9a9793;
}

/* Weigeren moet net zo makkelijk zijn als accepteren: zelfde formaat, naast
   elkaar, geen verstopte tekstlink. */
.cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cookiebar__actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 9rem;
}

.cookiebar .btn--outline {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.cookiebar .btn--outline:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

/* Knop die eruitziet als een link, voor "Cookievoorkeuren" in de footer */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.linklike:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   17. Footer, zwart met cyaan onderbalk
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--grey-300);
  font-size: var(--fs-base);
}

/* :not(.btn) zodat knoppen in de footer hun eigen kleuren houden */
.site-footer a:not(.btn) {
  color: var(--grey-200);
  text-decoration: none;
}

.site-footer a:not(.btn):hover {
  color: var(--white);
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: var(--space-7);
  }
}

.site-footer__logo {
  width: 11rem;
  margin-bottom: var(--space-4);
}

/* Fotocredit: bewust bescheiden, maar wel leesbaar op zwart (contrast 6.6:1) */
.site-footer__credit {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: #9a9793;
}

.site-footer h2 {
  margin-bottom: var(--space-4);
  color: var(--white);
  font-size: var(--fs-lg);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: var(--space-2);
}

.site-footer__bar {
  background: var(--cyan);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Zelfde specificiteit als de footer-linkregel hierboven, maar later in het
   bestand — zo wint de donkere tekstkleur op de cyaan balk. */
.site-footer__bar a:not(.btn) {
  color: var(--ink);
  text-decoration: underline;
}

.site-footer__bar a:not(.btn):hover {
  color: var(--ink);
}

.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  padding-block: var(--space-3);
}

.site-footer__bar p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   26. Zwevende knop naar Ontdek Alpha
   Staat rechtsonder in beeld en scrollt mee, zodat de verhalen vanaf elke
   pagina één klik ver zijn.
   -------------------------------------------------------------------------- */
.discover-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.85rem 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 28px rgb(20 16 17 / 0.35);
}

.discover-fab:hover,
.discover-fab:focus-visible {
  color: var(--white);
  background: var(--ink);
}

/* Het stipje in merkkleur, net als in de menubalk */
.discover-fab__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--cyan);
}

.discover-fab svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .discover-fab {
    transition: transform var(--transition), background var(--transition),
      box-shadow var(--transition);
  }

  .discover-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgb(20 16 17 / 0.42);
  }

  .discover-fab svg {
    transition: transform var(--transition);
  }

  .discover-fab:hover svg {
    transform: translateX(3px);
  }
}

/* Zolang de cookiekeuze nog openstaat blijft de knop weg: die balk staat
   onderaan en de twee zouden over elkaar heen vallen. */
.cookiebar-open .discover-fab {
  display: none;
}

/* Op smalle schermen iets compacter, zodat hij niet te veel wegneemt */
@media (max-width: 30rem) {
  .discover-fab {
    right: var(--space-4);
    bottom: var(--space-4);
    padding: 0.7rem 1.05rem;
    font-size: var(--fs-base);
  }
}