/* ==========================================================================
   v2 — LEGO-thema: kinderfeestje
   Alles is gescoped onder .bk2 (prefix "bk2" = "brick v2").
   ========================================================================== */

/* ---------- Tokens ---------- */
.bk2 {
  --bk2-red: #e3000b;
  --bk2-red-dark: #a3000a;
  --bk2-yellow: #ffcf00;
  --bk2-yellow-dark: #d19f00;
  --bk2-blue: #0a6bc4;
  --bk2-blue-dark: #06447f;
  --bk2-green: #007a33;
  --bk2-green-dark: #004f21;
  --bk2-orange: #ff8a1f;
  --bk2-orange-dark: #c25e00;

  --bk2-ink: #15192b;
  --bk2-muted: #4a5068;
  --bk2-line: #e3e9f2;
  --bk2-soft: #f4f7fb;
  --bk2-sky: #eaf2fb;

  --bk2-font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --bk2-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Standaard steenkleur (wordt overschreven door .bk2-c-*) */
  --brick: var(--bk2-blue);
  --brick-dark: var(--bk2-blue-dark);
  --brick-ink: #fff;

  /* Noppen */
  --stud-h: 10px;
  --stud-inset: 18px;
  --stud-border: 0px;
}

/* Kleurvarianten: zetten alleen variabelen, geen layout. */
.bk2-c-red    { --brick: var(--bk2-red);    --brick-dark: var(--bk2-red-dark);    --brick-ink: #fff; }
.bk2-c-yellow { --brick: var(--bk2-yellow); --brick-dark: var(--bk2-yellow-dark); --brick-ink: var(--bk2-ink); }
.bk2-c-blue   { --brick: var(--bk2-blue);   --brick-dark: var(--bk2-blue-dark);   --brick-ink: #fff; }
.bk2-c-green  { --brick: var(--bk2-green);  --brick-dark: var(--bk2-green-dark);  --brick-ink: #fff; }
.bk2-c-orange { --brick: var(--bk2-orange); --brick-dark: var(--bk2-orange-dark); --brick-ink: var(--bk2-ink); }

/* ---------- Basis ---------- */
.bk2 {
  width: 100%;
  min-width: 0;
  padding: 0 clamp(16px, 3vw, 40px) clamp(56px, 7vw, 96px);
  box-sizing: border-box;
  color: var(--bk2-ink);
  font-family: var(--bk2-font-body);
  font-size: 1rem;
  line-height: 1.55;
  /* Baseplate: subtiele noppen van bovenaf gezien */
  background-color: var(--bk2-sky);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 0 5.5px, rgba(6, 68, 127, 0.07) 6px 7.5px, transparent 8px);
  background-size: 30px 30px;
}

.bk2 *,
.bk2 *::before,
.bk2 *::after {
  box-sizing: border-box;
}

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

.bk2 img {
  max-width: 100%;
}

.bk2 h1,
.bk2 h2,
.bk2 h3,
.bk2 h4 {
  font-family: var(--bk2-font-display);
  color: inherit;
  letter-spacing: -0.01em;
  text-transform: none;
}

.bk2 :focus-visible {
  outline: 3px solid var(--bk2-blue);
  outline-offset: 3px;
}

.bk2__main {
  display: grid;
  gap: clamp(56px, 7vw, 100px);
  width: min(100%, 1320px);
  min-width: 0;
  margin-inline: auto;
}

.bk2__main > * {
  min-width: 0;
}

/* ---------- Noppen (zijaanzicht) ----------
   Elk element met .bk2-studs krijgt een rij noppen op de bovenrand in var(--brick). */
.bk2-studs {
  position: relative;
}

.bk2-studs::before {
  position: absolute;
  z-index: 1;
  top: calc((var(--stud-h) + var(--stud-border)) * -1 + 1px);
  right: var(--stud-inset);
  left: var(--stud-inset);
  height: var(--stud-h);
  background:
    linear-gradient(90deg, transparent 7px, rgba(255, 255, 255, 0.4) 7px 11px, transparent 11px 27px, rgba(0, 0, 0, 0.14) 27px 31px, transparent 31px) center top / 38px 100% space no-repeat,
    var(--brick);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10' preserveAspectRatio='none'%3E%3Cpath d='M7 10V3.5A3.5 3.5 0 0 1 10.5 0h17A3.5 3.5 0 0 1 31 3.5V10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10' preserveAspectRatio='none'%3E%3Cpath d='M7 10V3.5A3.5 3.5 0 0 1 10.5 0h17A3.5 3.5 0 0 1 31 3.5V10z'/%3E%3C/svg%3E");
  -webkit-mask-size: 38px 100%;
  mask-size: 38px 100%;
  -webkit-mask-repeat: space no-repeat;
  mask-repeat: space no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
  content: "";
  pointer-events: none;
}

/* ---------- Knoppen ---------- */
.bk2-btn {
  --btn: var(--bk2-yellow);
  --btn-dark: var(--bk2-yellow-dark);
  --btn-ink: var(--bk2-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  margin-bottom: 5px;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--btn);
  color: var(--btn-ink) !important;
  font-family: var(--bk2-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--btn-dark);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.bk2-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--btn-dark);
  filter: brightness(1.04);
}

.bk2-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--btn-dark);
}

.bk2-btn span[aria-hidden] {
  transition: transform 160ms ease;
}

.bk2-btn:hover span[aria-hidden] {
  transform: translateX(3px);
}

.bk2-btn--blue {
  --btn: var(--bk2-blue);
  --btn-dark: var(--bk2-blue-dark);
  --btn-ink: #fff;
}

.bk2-btn--small {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 0.95rem;
}

.bk2-btn--large {
  min-height: 58px;
  padding: 16px 30px;
  border-radius: 14px;
  font-size: 1.2rem;
  box-shadow: 0 6px 0 var(--btn-dark);
}

.bk2-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bk2-red);
  color: #fff;
  font-family: var(--bk2-font-display);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--bk2-red-dark);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bk2-close:hover {
  background: var(--bk2-red-dark);
}

.bk2-close:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--bk2-red-dark);
}

/* ---------- Hero ---------- */
.bk2-hero {
  position: relative;
  z-index: 0; /* eigen stapelcontext: de bolletjes en snelkoppelingen in de hero komen nooit boven menu's of vensters van het thema */
  padding-top: clamp(16px, 2.5vw, 28px);
}

.bk2-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1900 / 778;
  min-height: 400px;
  border: 6px solid #fff;
  border-radius: 30px;
  background: var(--bk2-blue);
  box-shadow: 0 10px 0 rgba(21, 25, 43, 0.1), 0 30px 60px rgba(6, 30, 70, 0.18);
}

.bk2-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-hero__frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 18, 45, 0.55) 0%, rgba(8, 18, 45, 0.15) 45%, transparent 70%);
  content: "";
}

.bk2-hero__title {
  position: absolute;
  z-index: 2;
  bottom: clamp(84px, 9vw, 124px);
  left: clamp(20px, 4vw, 60px);
  display: grid;
  justify-items: start;
  gap: 22px;
}

.bk2-hero__tag {
  --brick: var(--bk2-blue);
  --brick-dark: var(--bk2-blue-dark);
  --stud-h: 8px;
  --stud-inset: 10px;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--brick);
  color: #fff;
  font-family: var(--bk2-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--brick-dark);
}

.bk2 .bk2-hero__title h1,
.bk2 .bk2-hero__title .bk2-hero__heading {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
}

.bk2-hero__line {
  --stud-h: 12px;
  --stud-inset: 22px;
  display: inline-block;
  padding: 0.16em 0.42em 0.2em;
  border-radius: 16px;
  background: var(--brick);
  color: var(--brick-ink);
  box-shadow: 0 7px 0 var(--brick-dark), 0 18px 30px rgba(0, 0, 0, 0.18);
}

.bk2-hero__line--yellow {
  --brick: var(--bk2-yellow);
  --brick-dark: var(--bk2-yellow-dark);
  --brick-ink: var(--bk2-ink);
  transform: rotate(-2deg);
}

.bk2-hero__line--red {
  --brick: var(--bk2-red);
  --brick-dark: var(--bk2-red-dark);
  --brick-ink: #fff;
  margin-left: 0.5em;
  transform: rotate(1.2deg);
}

/* Snelkoppelingen onder de hero */
.bk2-quick {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin: -54px clamp(16px, 4vw, 60px) 0;
}

.bk2-quick__brick {
  --stud-inset: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--brick);
  color: var(--brick-ink) !important;
  box-shadow: 0 7px 0 var(--brick-dark), 0 20px 34px rgba(6, 30, 70, 0.2);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.bk2-quick__brick:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 var(--brick-dark), 0 24px 36px rgba(6, 30, 70, 0.22);
}

.bk2-quick__brick:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--brick-dark), 0 10px 20px rgba(6, 30, 70, 0.2);
}

.bk2-quick__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--brick-dark);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.bk2-c-yellow .bk2-quick__icon {
  color: var(--bk2-ink);
}

.bk2-quick__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bk2-quick__icon--text {
  font-family: var(--bk2-font-display);
  font-size: 1.6rem;
  font-weight: 700;
}

.bk2-quick__copy {
  display: grid;
  min-width: 0;
}

.bk2-quick__copy strong {
  font-family: var(--bk2-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
}

.bk2-quick__copy small {
  font-size: 0.92rem;
  font-weight: 700;
  opacity: 0.88;
}

.bk2-quick__arrow {
  font-size: 1.4rem;
  font-weight: 900;
  transition: transform 160ms ease;
}

.bk2-quick__brick:hover .bk2-quick__arrow {
  transform: translateX(4px);
}

/* ---------- Sectiekop ---------- */
.bk2-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.bk2-eyebrow {
  --brick: var(--bk2-yellow);
  --brick-dark: var(--bk2-yellow-dark);
  --stud-h: 8px;
  --stud-inset: 10px;
  display: inline-block;
  margin: 8px 0 20px;
  padding: 7px 16px;
  border-radius: 8px;
  background: var(--brick);
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--brick-dark);
}

.bk2 .bk2-heading h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
}

.bk2-heading > p:last-child {
  max-width: 56ch;
  margin: 14px auto 0;
  color: var(--bk2-muted);
  font-size: 1.12rem;
}

/* ---------- Activiteitenkaarten ---------- */
.bk2-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 48px 28px;
  margin-top: clamp(40px, 5vw, 56px);
}

.bk2-card {
  --stud-h: 11px;
  --stud-inset: 24px;
  --stud-border: 4px;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-width: 0;
  border: 4px solid var(--brick);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 0 var(--brick-dark), 0 22px 40px rgba(6, 30, 70, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.bk2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 0 var(--brick-dark), 0 28px 44px rgba(6, 30, 70, 0.14);
}

.bk2-card--wide {
  grid-column: span 3;
}

.bk2-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bk2-soft);
  border-radius: 16px 16px 0 0;
}

.bk2-card--wide .bk2-card__media {
  aspect-ratio: 16 / 8.5;
}

.bk2-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
}

.bk2-card__number {
  --stud-h: 7px;
  --stud-inset: 7px;
  --stud-border: 0px;
  position: absolute;
  z-index: 2;
  bottom: -20px;
  left: 20px;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--brick);
  color: var(--brick-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 4px 0 var(--brick-dark), 0 8px 14px rgba(0, 0, 0, 0.18);
}

.bk2-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 34px 24px 24px;
}

.bk2 .bk2-card h3,
.bk2 .bk2-card .bk2-card__title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.1;
}

.bk2-card__body > p {
  margin: 0;
  color: var(--bk2-muted);
}

/* "Volg ons"-kaart */
.bk2-card--follow {
  flex-direction: row;
  grid-column: span 4;
  background: var(--brick);
  color: var(--brick-ink);
}

.bk2-card--follow .bk2-card__media {
  flex: 0 0 40%;
  aspect-ratio: auto;
  min-height: 240px;
  border-radius: 16px 0 0 16px;
  background: rgba(255, 255, 255, 0.14);
}

.bk2-card--follow .bk2-card__media img {
  border-radius: 16px 0 0 16px;
}

.bk2-card--follow .bk2-card__body {
  justify-content: center;
  align-items: flex-start;
  padding: 28px;
}

.bk2-card--follow .bk2-card__body > p {
  color: inherit;
  opacity: 0.92;
}

.bk2-card--follow .bk2-btn {
  margin-top: 8px;
}

.bk2 .bk2-card__body > .bk2-card__kicker {
  align-self: flex-start;
  margin: 0 0 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;
}

/* ---------- Uitklapbare details ---------- */
.bk2-details {
  margin-top: auto;
  padding-top: 10px;
  scroll-margin-top: 24px;
}

.bk2-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bk2-soft);
  background: color-mix(in srgb, var(--brick) 14%, #fff);
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--bk2-line);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--brick) 40%, #fff);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bk2-details > summary::-webkit-details-marker {
  display: none;
}

.bk2-details > summary:hover {
  transform: translateY(-1px);
}

.bk2-details > summary:active {
  transform: translateY(3px);
  box-shadow: none;
}

.bk2-details__toggle {
  display: inline-block;
  transition: transform 180ms ease;
}

.bk2-details[open] .bk2-details__toggle {
  transform: rotate(90deg);
}

.bk2-details__panel {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 3px dashed var(--bk2-line);
  animation: bk2-fade-down 260ms ease both;
}

.bk2-details__panel > .bk2-close {
  display: none;
}

.bk2-details__copy {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.bk2 .bk2-details__copy h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.bk2-details__copy p {
  margin: 0;
  color: var(--bk2-muted);
}

.bk2-details__copy .bk2-btn {
  margin-top: 6px;
}

/* ---------- Slider ---------- */
.bk2-slider {
  position: relative;
  min-width: 0;
}

.bk2-slider__viewport {
  overflow: hidden;
  border-radius: 14px;
  background: var(--bk2-soft);
}

.bk2-slider__slide {
  display: none;
  margin: 0;
}

.bk2-slider__slide.is-active {
  display: block;
  animation: bk2-slide-in 260ms ease both;
}

.bk2-slider__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  object-fit: cover;
}

.bk2-slider__slide figcaption {
  padding: 8px 12px 10px;
  color: var(--bk2-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.bk2-slider__controls {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 1.6;
  padding: 0 12px;
  pointer-events: none;
}

.bk2-slider__button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bk2-slider__button:hover {
  background: var(--bk2-yellow);
}

.bk2-slider__button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

.bk2-slider__status {
  align-self: flex-end;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(21, 25, 43, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

/* Desktop: uitgeklapte details worden een modal */
@media (min-width: 761px) {
  .bk2-details[open] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    margin: 0;
    padding: 32px 24px;
    overflow-y: auto;
    background: rgba(10, 16, 38, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: bk2-fade 280ms ease both;
  }

  .bk2-details[open] > summary {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .bk2-details[open] > .bk2-details__panel {
    --stud-h: 13px;
    --stud-inset: 34px;
    --stud-border: 5px;
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
      "copy slider"
      "secondary slider";
    align-content: start;
    gap: 22px 32px;
    width: min(1040px, 100%);
    margin: auto;
    padding: 40px;
    border: 5px solid var(--brick);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 12px 0 var(--brick-dark), 0 40px 80px rgba(0, 0, 0, 0.35);
    animation: bk2-pop-in 380ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
  }

  .bk2-details[open] > .bk2-details__panel::before {
    /* Noppen op de modal zelf */
    position: absolute;
    z-index: 1;
    top: calc((var(--stud-h) + var(--stud-border)) * -1 + 1px);
    right: var(--stud-inset);
    left: var(--stud-inset);
    height: var(--stud-h);
    background:
      linear-gradient(90deg, transparent 7px, rgba(255, 255, 255, 0.4) 7px 11px, transparent 11px 27px, rgba(0, 0, 0, 0.14) 27px 31px, transparent 31px) center top / 38px 100% space no-repeat,
      var(--brick);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10' preserveAspectRatio='none'%3E%3Cpath d='M7 10V3.5A3.5 3.5 0 0 1 10.5 0h17A3.5 3.5 0 0 1 31 3.5V10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10' preserveAspectRatio='none'%3E%3Cpath d='M7 10V3.5A3.5 3.5 0 0 1 10.5 0h17A3.5 3.5 0 0 1 31 3.5V10z'/%3E%3C/svg%3E");
    -webkit-mask-size: 38px 100%;
    mask-size: 38px 100%;
    -webkit-mask-repeat: space no-repeat;
    mask-repeat: space no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
    content: "";
  }

  .bk2-details[open] .bk2-details__panel > .bk2-close {
    display: grid;
  }

  .bk2-details[open] .bk2-details__copy {
    grid-area: copy;
    padding-right: 20px;
  }

  .bk2-details[open] .bk2-details__copy--secondary {
    grid-area: secondary;
    padding-top: 20px;
    border-top: 3px dashed var(--bk2-line);
  }

  .bk2-details[open] .bk2-slider {
    grid-area: slider;
    align-self: start;
    margin-top: 28px;
  }

  .bk2 .bk2-details[open] .bk2-details__copy:not(.bk2-details__copy--secondary) h4 {
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.15;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .bk2-details[open] > .bk2-details__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "slider"
      "secondary";
    padding: 32px;
  }

  .bk2-details[open] .bk2-slider {
    margin-top: 0;
  }
}

/* ---------- Grote CTA ---------- */
.bk2-cta {
  --stud-h: 14px;
  --stud-inset: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(30px, 4vw, 52px) clamp(24px, 5vw, 64px);
  border-radius: 26px;
  background-color: var(--brick);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0 10px, rgba(0, 0, 0, 0.08) 10.5px 12px, transparent 12.5px);
  background-size: 46px 46px;
  color: var(--brick-ink);
  box-shadow: 0 10px 0 var(--brick-dark), 0 30px 50px rgba(6, 30, 70, 0.16);
}

.bk2 .bk2-cta h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
}

.bk2-cta__copy p {
  max-width: 48ch;
  margin: 10px 0 0;
  font-size: 1.12rem;
  font-weight: 700;
  opacity: 0.92;
}

.bk2-cta .bk2-btn {
  flex: 0 0 auto;
}

/* ---------- Faciliteiten / huisregels ---------- */
.bk2-refs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.bk2-ref {
  --stud-border: 4px;
  --stud-inset: 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 4px solid var(--brick);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 0 var(--brick-dark);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.bk2-ref:hover {
  transform: translateY(-3px);
  box-shadow: 0 11px 0 var(--brick-dark);
}

.bk2-ref:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 var(--brick-dark);
}

.bk2-ref__icon.material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: var(--brick);
  color: var(--brick-ink);
  font-size: 34px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.bk2-ref__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bk2-ref__copy small {
  color: var(--bk2-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bk2-ref__copy strong {
  font-family: var(--bk2-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
}

.bk2-ref__copy > span {
  color: var(--bk2-muted);
}

.bk2-ref__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brick);
  color: var(--brick-ink);
  font-size: 1.2rem;
  font-weight: 900;
  transition: transform 160ms ease;
}

.bk2-ref:hover .bk2-ref__arrow {
  transform: translateX(4px);
}

/* ---------- Panelen ---------- */
.bk2-panel {
  --stud-h: 13px;
  --stud-inset: 30px;
  --stud-border: 5px;
  display: grid;
  gap: 22px;
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  border: 5px solid var(--brick);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 10px 0 var(--brick-dark), 0 26px 44px rgba(6, 30, 70, 0.1);
  scroll-margin-top: 32px;
}

.bk2-panel__heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bk2-panel__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: var(--brick);
  color: var(--brick-ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.bk2-panel__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.bk2-panel__icon--text {
  font-family: var(--bk2-font-display);
  font-size: 2rem;
  font-weight: 700;
}

.bk2 .bk2-panel__eyebrow {
  margin: 0 0 2px;
  color: var(--bk2-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bk2 .bk2-panel h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
}

.bk2-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  padding: 18px 20px;
  border: 3px dashed rgba(10, 107, 196, 0.35);
  border-radius: 16px;
  background: #eef6ff;
}

.bk2-callout > div {
  display: grid;
  flex: 1 1 280px;
  gap: 2px;
}

.bk2-callout strong {
  font-family: var(--bk2-font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.bk2-callout > div > span {
  color: var(--bk2-muted);
  font-size: 0.97rem;
}

.bk2-link {
  display: inline-block;
  justify-self: start;
  color: var(--bk2-blue) !important;
  font-family: var(--bk2-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

.bk2-link:hover {
  color: var(--bk2-blue-dark) !important;
}

/* ---------- Modals ---------- */
.bk2-modal[hidden] {
  display: none;
}

.bk2-modal {
  position: fixed;
  inset: 0;
  z-index: 1100; /* boven een geopende details-modal */
  display: grid;
  padding: 40px 20px 32px;
  overflow-y: auto;
}

.bk2-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 38, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: bk2-fade 240ms ease both;
}

.bk2-modal__dialog {
  --stud-h: 12px;
  --stud-inset: 28px;
  --stud-border: 5px;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(580px, 100%);
  margin: auto;
  padding: 36px 30px 30px;
  border: 5px solid var(--brick);
  border-radius: 26px;
  background: #fff;
  color: var(--bk2-ink);
  box-shadow: 0 10px 0 var(--brick-dark), 0 40px 80px rgba(0, 0, 0, 0.35);
  animation: bk2-pop-in 340ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.bk2 .bk2-modal__dialog h2 {
  margin: 0;
  padding-right: 48px;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
}

.bk2 .bk2-modal__dialog h3 {
  margin: 6px 0 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.bk2-modal__dialog > p:not(.bk2-panel__eyebrow) {
  margin: 0;
  color: var(--bk2-muted);
}

.bk2-modal__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk2-modal__list li {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 42px;
  border-radius: 12px;
  background: var(--bk2-soft);
}

.bk2-modal__list li::before {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--bk2-yellow);
  box-shadow: 0 2px 0 var(--bk2-yellow-dark);
  content: "";
}

.bk2-newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
}

.bk2-newsletter__input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding: 0 16px;
  border: 3px solid var(--bk2-line);
  border-radius: 12px;
  background: #fff;
  color: var(--bk2-ink);
  font: inherit;
  font-weight: 700;
}

.bk2-newsletter__input:focus {
  border-color: var(--bk2-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(10, 107, 196, 0.18);
}

.bk2-newsletter .bk2-btn {
  min-height: 50px;
}

.bk2-social {
  padding-top: 16px;
  border-top: 3px dashed var(--bk2-line);
}

.bk2 .bk2-social h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.bk2-social__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bk2-social__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bk2-soft);
  font-size: 0.92rem;
  font-weight: 800;
  transition: background 140ms ease;
}

.bk2-social__links a:hover {
  background: var(--bk2-yellow);
}

/* ---------- Animaties ---------- */
@keyframes bk2-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bk2-fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bk2-pop-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bk2-slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bk2 *,
  .bk2 *::before,
  .bk2 *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Extra kleur ---------- */
.bk2-c-dark { --brick: #232a45; --brick-dark: #0e1224; --brick-ink: #fff; }

/* ---------- Hero met meerdere slides ---------- */
.bk2-hero__frame--slides::after {
  display: none;
}

.bk2-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.bk2-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.bk2-hero__slide::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 18, 45, 0.55) 0%, rgba(8, 18, 45, 0.15) 45%, transparent 70%);
  content: "";
}

.bk2-hero__dots {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 24px;
  display: flex;
  gap: 8px;
}

.bk2-hero__dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.bk2-hero__dot.is-active {
  background: var(--bk2-yellow);
}

.bk2-hero__line--blue {
  --brick: var(--bk2-blue);
  --brick-dark: var(--bk2-blue-dark);
  --brick-ink: #fff;
  margin-left: 0.5em;
  transform: rotate(1.2deg);
}

/* ---------- Snelkoppelingen: varianten ---------- */
.bk2-quick--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bk2-quick__icon .material-symbols-outlined {
  font-size: 30px;
}

.bk2-quick__brick[aria-current] {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--brick-dark), 0 0 0 4px #fff, 0 12px 24px rgba(6, 30, 70, 0.2);
}

/* ---------- Sectiekop: varianten ---------- */
.bk2 .bk2-heading h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
}

.bk2-heading--left {
  margin: 0;
  text-align: left;
}

.bk2-heading--left > p:last-child {
  margin-left: 0;
}

/* ---------- Kaarten: grids en extra's ---------- */
.bk2-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk2-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk2-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px; }

.bk2-cards--two > .bk2-card,
.bk2-cards--three > .bk2-card,
.bk2-cards--four > .bk2-card {
  grid-column: auto;
}

.bk2-card__body {
  padding-top: 24px;
}

.bk2-card:has(.bk2-card__number) .bk2-card__body {
  padding-top: 34px;
}

.bk2-card__tag {
  --stud-h: 7px;
  --stud-inset: 7px;
  --stud-border: 0px;
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--brick);
  color: var(--brick-ink);
  font-family: var(--bk2-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 var(--brick-dark), 0 6px 12px rgba(0, 0, 0, 0.2);
}

.bk2-card__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.bk2-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bk2-soft);
  background: color-mix(in srgb, var(--brick) 16%, #fff);
  color: var(--bk2-ink);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.bk2-card__actions {
  margin-top: auto;
  padding-top: 12px;
}

.bk2-card--soon {
  border-style: dashed;
  box-shadow: 0 8px 0 rgba(21, 25, 43, 0.12);
}

.bk2-card--soon:hover {
  transform: none;
  box-shadow: 0 8px 0 rgba(21, 25, 43, 0.12);
}

.bk2-card--soon .bk2-card__media img {
  filter: grayscale(0.85);
  opacity: 0.75;
}

.bk2-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bk2-soft);
  color: var(--bk2-muted);
  font-family: var(--bk2-font-display);
  font-weight: 600;
}

.bk2-soon::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bk2-orange);
  content: "";
}

/* ---------- Video ---------- */
.bk2-video {
  position: relative;
  overflow: hidden;
  width: min(100%, 960px);
  aspect-ratio: 16 / 9;
  margin: clamp(32px, 4vw, 48px) auto 0;
  border: 6px solid #fff;
  border-radius: 24px;
  background: var(--bk2-ink);
  box-shadow: 0 10px 0 rgba(21, 25, 43, 0.12), 0 30px 60px rgba(6, 30, 70, 0.18);
}

.bk2-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Split (tekst + media) ---------- */
.bk2-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.bk2-split__copy {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.bk2-split__copy .bk2-heading {
  margin: 0;
  text-align: left;
}

.bk2 .bk2-split__copy .bk2-heading h2 {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
}

.bk2-split__copy .bk2-heading > p:last-child {
  margin-left: 0;
}

.bk2-split .bk2-video {
  width: 100%;
  margin: 0;
}

/* ---------- Callout op paginaniveau ---------- */
.bk2-callout--page {
  border-color: rgba(10, 107, 196, 0.3);
  background: #fff;
  box-shadow: 0 6px 0 rgba(21, 25, 43, 0.08);
}

.bk2-cards + .bk2-callout {
  margin-top: 40px;
}

.bk2-section--top {
  padding-top: clamp(32px, 5vw, 64px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .bk2-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bk2-card,
  .bk2-card--wide {
    grid-column: span 1;
  }

  .bk2-card--wide .bk2-card__media {
    aspect-ratio: 16 / 10;
  }

  .bk2-card--follow {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .bk2-quick__brick {
    padding: 16px;
  }

  .bk2-quick__icon {
    width: 44px;
    height: 44px;
  }

  .bk2-quick__icon svg {
    width: 26px;
    height: 26px;
  }

  .bk2-quick__icon .material-symbols-outlined {
    font-size: 26px;
  }

  .bk2-quick__copy strong {
    font-size: 1.1rem;
  }
}

@media (max-width: 760px) {
  .bk2-hero__frame {
    aspect-ratio: auto;
    height: clamp(360px, 95vw, 460px);
    min-height: 0;
    border-width: 4px;
    border-radius: 24px;
  }

  .bk2-hero__frame::after,
  .bk2-hero__slide::after {
    background: linear-gradient(0deg, rgba(8, 18, 45, 0.6) 0%, rgba(8, 18, 45, 0.1) 60%, transparent 100%);
  }

  .bk2-hero__title {
    right: 18px;
    bottom: 26px;
    left: 18px;
    gap: 18px;
  }

  .bk2-hero__line--red,
  .bk2-hero__line--blue {
    margin-left: 0.3em;
  }

  .bk2-hero__dots {
    top: 16px;
    right: 16px;
  }

  .bk2-quick {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin: 30px 0 0;
  }

  .bk2-quick__brick {
    box-shadow: 0 6px 0 var(--brick-dark);
  }

  .bk2-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .bk2-refs {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .bk2-ref {
    padding: 20px;
    gap: 14px;
  }

  .bk2-ref__icon.material-symbols-outlined {
    width: 52px;
    height: 52px;
    font-size: 28px;
  }

  .bk2-panel {
    --stud-inset: 20px;
    border-radius: 22px;
  }

  .bk2-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk2-video {
    border-width: 4px;
    border-radius: 18px;
  }
}

@media (max-width: 640px) {
  .bk2-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .bk2-card--follow {
    flex-direction: column;
    grid-column: span 1;
  }

  .bk2-card--follow .bk2-card__media {
    flex-basis: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: 16px 16px 0 0;
  }

  .bk2-card--follow .bk2-card__media img {
    border-radius: 16px 16px 0 0;
  }

  .bk2-card__body {
    padding-right: 20px;
    padding-bottom: 22px;
    padding-left: 20px;
  }

  .bk2-ref {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bk2-ref__arrow {
    display: none;
  }

  .bk2-modal__dialog {
    padding: 32px 20px 22px;
  }
}

/* ---------- Faciliteitenkaarten (ook gebruikt voor "waarom" en "handig om te weten") ---------- */
.bk2 .bk2-heading h1 {
  font-size: clamp(2.3rem, 5vw, 3.8rem);
}

/* ---------- Faciliteiten ---------- */
/* Flex i.p.v. grid: een onvolledige laatste rij staat gecentreerd */
.bk2-facilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(40px, 5vw, 56px);
}

.bk2-facilities > .bk2-facility {
  flex: 0 1 calc((100% - 3 * 22px) / 4);
  min-width: 0;
}

.bk2-facility {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px;
  border: 3px solid var(--bk2-line);
  border-top: 8px solid var(--brick);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(21, 25, 43, 0.08);
}

.bk2-facility__icon.material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--brick);
  color: var(--brick-ink);
  font-size: 28px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.bk2 .bk2-facility h3,
.bk2 .bk2-facility .bk2-facility__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}

.bk2-facility p {
  margin: 0;
  color: var(--bk2-muted);
  font-size: 0.95rem;
}


/* ---------- Uitgelicht: speelbandje ---------- */
.bk2-c-purple { --brick: #7a3fb8; --brick-dark: #522780; --brick-ink: #fff; }

/* Brede kaart (2 kolommen) voor het speelbandje */
.bk2-facilities > .bk2-facility--wide {
  flex-basis: calc((100% - 22px) / 2);
  border-top-width: 8px;
}

.bk2-facility--wide h2.bk2-facility__title {
  font-size: 1.5rem;
}

.bk2-facility--wide p:not(.bk2-facility__tag) {
  font-size: 1.05rem;
}

.bk2-facility--wide strong {
  color: var(--bk2-ink);
}

.bk2 .bk2-facility__tag {
  justify-self: start;
  margin: 0;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bk2-red);
  color: #fff;
  font-family: var(--bk2-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .bk2-facilities > .bk2-facility {
    flex-basis: calc((100% - 22px) / 2);
  }

  .bk2-facilities > .bk2-facility--wide {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  .bk2-facilities > .bk2-facility {
    flex-basis: 100%;
  }
}

/* ---------- Paginaspecifiek: kinderfeestje ---------- */

.bk2 section[id],
.bk2 aside[id] {
  scroll-margin-top: 90px;
}

/* Geen donkere fade over de hero */
.bk2 .bk2-hero__frame::after {
  content: none;
}

.bk2 .bk2-heading h1 {
  font-size: clamp(2.3rem, 5vw, 4rem);
}

/* Meldingsregel (ook in de modal) */
.bk2-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff4dd;
  color: var(--bk2-ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.bk2-notice__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bk2-orange);
  color: #fff;
  font-family: var(--bk2-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.bk2-notice__icon.material-symbols-outlined {
  font-size: 16px;
}

/* ---------- Waarom + handig om te weten (faciliteitenkaarten) ---------- */
.bk2-facilities--five > .bk2-facility {
  flex-basis: calc((100% - 4 * 22px) / 5);
}

.bk2-facilities--three > .bk2-facility {
  flex-basis: calc((100% - 2 * 22px) / 3);
}

.bk2-facilities .bk2-facility .bk2-facility__note {
  color: var(--bk2-ink);
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 700;
}

.bk2-facilities .bk2-facility__action {
  justify-self: start;
  margin-top: 6px;
}

/* ---------- Optiekaarten ---------- */
.bk2-opt__variant {
  display: block;
  margin-top: 4px;
  color: var(--brick-dark);
  font-size: 1.05rem;
  font-weight: 600;
}

.bk2-c-yellow .bk2-opt__variant {
  color: var(--bk2-ink);
}

.bk2-card__body > .bk2-opt__meta,
.bk2-card__body > .bk2-opt__list {
  margin: 0;
}

.bk2-opt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.bk2-opt__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--bk2-soft);
  font-size: 0.9rem;
  font-weight: 800;
}

.bk2-opt__meta .material-symbols-outlined {
  color: var(--brick-dark);
  font-size: 20px;
}

.bk2-c-yellow .bk2-opt__meta .material-symbols-outlined {
  color: var(--bk2-ink);
}

.bk2-opt__list {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.bk2-opt__list li {
  position: relative;
  margin: 0;
  padding-left: 26px;
  color: var(--bk2-ink);
}

.bk2-opt__list li::before {
  position: absolute;
  top: 0.38em;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--brick);
  box-shadow: 0 2px 0 var(--brick-dark);
  content: "";
}

.bk2-opt__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 3px dashed var(--bk2-line);
}

.bk2-opt__price {
  display: grid;
  line-height: 1.1;
}

.bk2-opt__price strong {
  font-family: var(--bk2-font-display);
  font-size: 1.9rem;
  font-weight: 700;
}

.bk2-opt__price span {
  color: var(--bk2-muted);
  font-size: 0.85rem;
  font-weight: 800;
}

/* ---------- Keuzeknoppen (A / B / C) ---------- */
.bk2-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 22px;
  margin-top: clamp(40px, 5vw, 56px);
}

.bk2-tab {
  --stud-h: 10px;
  --stud-inset: 20px;
  position: relative;
  display: flex;
  flex: 0 1 300px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--brick);
  color: var(--brick-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.72;
  box-shadow: 0 6px 0 var(--brick-dark);
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.bk2-tab:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.bk2-tab[aria-pressed="true"] {
  opacity: 1;
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--brick-dark), 0 0 0 4px #fff, 0 0 0 7px var(--brick-dark);
}

.bk2-tab__badge {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.bk2-tab__copy {
  display: grid;
  min-width: 0;
}

.bk2-tab__copy strong {
  font-family: var(--bk2-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.15;
}

.bk2-tab__copy small {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.9;
}

.bk2-tab__flag {
  position: absolute;
  top: -12px;
  right: 14px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--bk2-red);
  color: #fff;
  font-family: var(--bk2-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 var(--bk2-red-dark);
}

/* ---------- Programma (stappen) ---------- */
.bk2-steps-shell {
  display: grid;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 48px);
}

.bk2-steps-shell__pill {
  justify-self: center;
  margin: 0;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--bk2-ink);
  color: #fff;
  font-family: var(--bk2-font-display);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.bk2-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.bk2-step {
  display: flex;
  flex: 0 1 calc((100% - 3 * 22px) / 4);
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 3px solid var(--bk2-line);
  border-top: 8px solid var(--brick);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(21, 25, 43, 0.08);
}

.bk2-step__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
}

.bk2-step__number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brick);
  color: var(--brick-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}

.bk2-step__heading {
  min-width: 0;
  flex: 1;
}

.bk2 .bk2-step__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}

.bk2-step__time {
  margin: 4px 0 0;
  color: var(--bk2-muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.bk2-step__indicator {
  display: none;
  font-family: var(--bk2-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.bk2-step__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bk2-step__body {
  padding: 14px 16px 18px;
}

.bk2-step__body p {
  margin: 0;
  color: var(--bk2-muted);
  font-size: 0.93rem;
}

.bk2-step__body strong {
  color: var(--bk2-ink);
}

/* ---------- Details per optie ---------- */
.bk2-post {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  margin-top: clamp(48px, 6vw, 80px);
}

.bk2 .bk2-post .bk2-heading h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
}

.bk2-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 28px;
}

.bk2-post-card {
  --stud-h: 11px;
  --stud-inset: 24px;
  --stud-border: 4px;
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: 4px solid var(--brick);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 0 var(--brick-dark), 0 22px 40px rgba(6, 30, 70, 0.1);
}

.bk2-post-card--full {
  grid-column: 1 / -1;
}

.bk2-post-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bk2-post-card__icon.material-symbols-outlined {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--brick);
  color: var(--brick-ink);
  font-size: 26px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.bk2 .bk2-post-card h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.bk2-post-card__note {
  margin: 0;
  color: var(--bk2-muted);
}

.bk2-post-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk2-post-list li {
  margin: 0;
}

.bk2-post-list--facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bk2-post-list--facts li {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bk2-soft);
}

.bk2-post-list--facts strong {
  color: var(--bk2-muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bk2-post-list--facts span {
  font-weight: 800;
}

.bk2-post-list--checks li {
  position: relative;
  padding-left: 30px;
  font-weight: 700;
}

.bk2-post-list--checks li::before {
  position: absolute;
  top: 0.32em;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--brick);
  box-shadow: 0 2px 0 var(--brick-dark);
  content: "";
}

/* Thema's */
.bk2-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.bk2-theme-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 10 / 7;
  border: 3px solid var(--bk2-line);
  border-radius: 14px;
  background: var(--bk2-soft);
}

.bk2-theme-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-theme-tile figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--brick);
  color: var(--brick-ink);
  font-family: var(--bk2-font-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 3px 0 var(--brick-dark);
}

/* Bijboeken */
.bk2-addon-groups {
  display: grid;
  gap: 12px;
}

.bk2-addon-group {
  border: 3px solid var(--bk2-line);
  border-radius: 14px;
  background: #fff;
}

.bk2-addon-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--bk2-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bk2-addon-group__toggle:hover {
  background: var(--bk2-soft);
}

.bk2-addon-group__title {
  font-family: var(--bk2-font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.bk2-addon-group__indicator {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brick);
  color: var(--brick-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.bk2-addon-group__panel {
  padding: 4px 18px 18px;
}

.bk2-addon-group__panel[hidden] {
  display: none;
}

.bk2-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.bk2-addon-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--bk2-line);
  border-radius: 14px;
  background: #fff;
}

.bk2-addon-card__media {
  aspect-ratio: 16 / 9;
  background: var(--bk2-soft);
}

.bk2-addon-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-addon-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px 16px;
}

.bk2 .bk2-addon-card__title {
  margin: 0;
  font-family: var(--bk2-font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.bk2-addon-card__copy {
  flex: 1;
  margin: 0;
  color: var(--bk2-muted);
  font-size: 0.93rem;
}

.bk2-addon-card__price {
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.05rem;
  font-weight: 700;
}

/* ---------- Hulp + voorwaarden ---------- */
.bk2-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 28px;
}

.bk2-info {
  --stud-h: 11px;
  --stud-inset: 24px;
  --stud-border: 4px;
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 4px solid var(--brick);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 0 var(--brick-dark), 0 22px 40px rgba(6, 30, 70, 0.1);
}

.bk2-info__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bk2-info__icon.material-symbols-outlined {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brick);
  color: var(--brick-ink);
  font-size: 30px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.bk2 .bk2-info h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}

.bk2-info__header p {
  margin: 2px 0 0;
  color: var(--bk2-muted);
}

.bk2-info__contact {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk2-info__contact li {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bk2-soft);
  font-weight: 800;
}

.bk2-info__contact a:hover {
  text-decoration: underline;
}

.bk2-info .bk2-opt__list {
  gap: 10px;
}

/* ---------- Modal: cadeaumandje ---------- */
.bk2-modal__dialog--wide {
  width: min(860px, 100%);
}

.bk2-gift__kicker {
  margin: 0;
  color: var(--bk2-green);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bk2-modal__dialog > .bk2-gift__lead {
  color: var(--bk2-ink);
  font-size: 1.15rem;
}

.bk2-gift__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk2-gift__strip li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bk2-soft);
  font-weight: 800;
}

.bk2-gift__strip .material-symbols-outlined {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bk2-green);
  color: #fff;
  font-size: 22px;
}

.bk2-gift__process {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bk2-gift__card {
  padding: 18px;
  border: 3px solid var(--brick);
  border-radius: 16px;
  background: #fff;
}

.bk2 .bk2-modal__dialog .bk2-gift__card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--brick-dark);
  font-size: 1.1rem;
}

.bk2-gift__card h3 .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brick);
  color: var(--brick-ink);
  font-size: 20px;
}

.bk2-gift__card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  counter-reset: gift;
  list-style: none;
}

.bk2-gift__card li {
  position: relative;
  margin: 0;
  padding-left: 36px;
  font-weight: 700;
  counter-increment: gift;
}

.bk2-gift__card li::before {
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brick);
  color: var(--brick-ink);
  font-family: var(--bk2-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  content: counter(gift);
}

/* ---------- Responsive: kinderfeestje ---------- */
@media (max-width: 1180px) {
  .bk2-facilities--five > .bk2-facility {
    flex-basis: calc((100% - 2 * 22px) / 3);
  }

  .bk2-step {
    flex-basis: calc((100% - 22px) / 2);
  }
}

@media (max-width: 1080px) {
  .bk2-facilities--five > .bk2-facility,
  .bk2-facilities--three > .bk2-facility {
    flex-basis: calc((100% - 22px) / 2);
  }

  /* Derde optiekaart staat gecentreerd onder de eerste twee */
  .bk2-cards--options:not(.bk2-cards--two-up) > .bk2-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 14px);
  }
}

@media (max-width: 900px) {
  .bk2-post-grid,
  .bk2-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk2-gift__strip,
  .bk2-gift__process {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  /* Stappen worden een accordeon (zie kinderfeestje.js) */
  .bk2-steps {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .bk2-step {
    flex-basis: auto;
  }

  .bk2-steps-shell[data-step-accordion="true"] .bk2-step__header {
    cursor: pointer;
  }

  .bk2-steps-shell[data-step-accordion="true"] .bk2-step__indicator {
    display: block;
  }

  .bk2-step__image[hidden],
  .bk2-step__body[hidden] {
    display: none;
  }
}

@media (max-width: 640px) {
  .bk2-post-list--facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk2-facilities--five > .bk2-facility,
  .bk2-facilities--three > .bk2-facility {
    flex-basis: 100%;
  }

  .bk2-cards--options:not(.bk2-cards--two-up) > .bk2-card:last-child {
    width: 100%;
  }

  .bk2-tab {
    flex-basis: 100%;
  }

  .bk2-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bk2-addon-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bk2-opt__footer .bk2-btn {
    margin-bottom: 0;
  }
}

/* ---------- Hero: zelfde formaat als activiteiten ---------- */
.bk2-hero__title {
  gap: 16px;
}

.bk2-hero__tag {
  --stud-h: 7px;
  --stud-inset: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
}

.bk2 .bk2-hero__title h1 {
  gap: 8px;
  font-size: clamp(1.6rem, 3.3vw, 2.9rem);
}

.bk2-hero__line {
  --stud-h: 9px;
  --stud-inset: 16px;
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--brick-dark), 0 12px 24px rgba(0, 0, 0, 0.18);
}

@media (max-width: 760px) {
  .bk2-hero__image {
    object-position: 28% center;
  }

  .bk2-hero__title {
    gap: 18px;
  }
}

/* Workshop-stappen hebben geen tijdsaanduiding */
.bk2-step__time:empty {
  display: none;
}

/* Mobiel: faciliteitenkaarten compact (icoon links, tekst rechts) */
@media (max-width: 640px) {
  .bk2-facilities {
    gap: 12px;
  }

  .bk2-facilities > .bk2-facility {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    row-gap: 2px;
    padding: 14px 16px;
    border-top-width: 6px;
  }

  .bk2-facilities .bk2-facility__icon.material-symbols-outlined {
    grid-row: 1 / span 6;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 12px;
    font-size: 24px;
  }

  .bk2-facilities > .bk2-facility > :not(.bk2-facility__icon) {
    grid-column: 2;
  }

  .bk2-facility p {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

/* Balk tussen de programma-stappen en de details heeft lucht nodig (staat binnen een sectie) */
.bk2-cta--inline {
  margin-top: clamp(56px, 7vw, 96px);
}

/* ---------- Kleur volgt de gekozen optie ---------- */
#beschikbaarheid[data-active-option="bouwfestijn"] {
  --opt: var(--bk2-yellow);
  --opt-dark: var(--bk2-yellow-dark);
  --opt-ink: var(--bk2-ink);
  --opt-text: var(--bk2-ink);
}

#beschikbaarheid[data-active-option="vip"] {
  --opt: var(--bk2-blue);
  --opt-dark: var(--bk2-blue-dark);
  --opt-ink: #fff;
  --opt-text: var(--bk2-blue-dark);
}

#beschikbaarheid[data-active-option="workshop"] {
  --opt: var(--bk2-green);
  --opt-dark: var(--bk2-green-dark);
  --opt-ink: #fff;
  --opt-text: var(--bk2-green-dark);
}

#beschikbaarheid .bk2-step,
#beschikbaarheid .bk2-post-card,
#beschikbaarheid .bk2-post .bk2-eyebrow,
#beschikbaarheid .bk2-addon-group {
  --brick: var(--opt);
  --brick-dark: var(--opt-dark);
  --brick-ink: var(--opt-ink);
}

/* Duidelijke kop met de naam van de gekozen optie */
#beschikbaarheid .bk2-post .bk2-heading h2 {
  color: var(--opt-text);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
}

#beschikbaarheid .bk2-post .bk2-eyebrow {
  font-size: 0.95rem;
  padding: 8px 18px;
}

/* Thema- en workshopkeuze: rijen met naam links en prijs rechts (zelfde stijl als de prijzen op Bouwkasteel) */
.bk2-theme-grid {
  display: block;
}

.bk2-prices__list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--bk2-line);
  border-radius: 16px;
  list-style: none;
}

.bk2-prices__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
}

.bk2-prices__list li + li {
  border-top: 2px dashed var(--bk2-line);
}

.bk2-prices__list li > span {
  font-weight: 700;
}

.bk2-price {
  flex: 0 0 auto;
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.bk2-price--free {
  color: #075c28;
}

/* ---------- Video met afspeelknop (Cloudflare Stream) ---------- */
.bk2-video__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--bk2-ink);
  color: #fff;
  cursor: pointer;
}

.bk2-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.bk2-video__play::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 18, 45, 0.55) 0%, transparent 45%);
  content: "";
  pointer-events: none;
}

.bk2-video__play:hover .bk2-video__poster {
  transform: scale(1.03);
}

.bk2-video__button {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(68px, 9vw, 96px);
  height: clamp(68px, 9vw, 96px);
  border-radius: 50%;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  box-shadow: 0 7px 0 var(--bk2-yellow-dark), 0 18px 34px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.bk2-video__button svg {
  width: 44%;
  height: 44%;
  margin-left: 6%;
  fill: currentColor;
}

.bk2-video__play:hover .bk2-video__button {
  transform: translate(-50%, calc(-50% - 3px)) scale(1.05);
  box-shadow: 0 10px 0 var(--bk2-yellow-dark), 0 22px 38px rgba(0, 0, 0, 0.38);
}

.bk2-video__play:active .bk2-video__button {
  transform: translate(-50%, calc(-50% + 4px));
  box-shadow: 0 2px 0 var(--bk2-yellow-dark);
}

.bk2-video__label {
  position: absolute;
  z-index: 2;
  bottom: clamp(12px, 2.5vw, 22px);
  left: clamp(12px, 2.5vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border-radius: 12px;
  background: rgba(21, 25, 43, 0.82);
  font-family: var(--bk2-font-display);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  line-height: 1.2;
}

.bk2-video__time {
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  font-weight: 700;
}

.bk2-video.is-playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bk2-video.is-playing video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

/* Aparte video voor telefoons (staand) */
.bk2-video__poster--mobile {
  display: none;
}

@media (max-width: 760px) {
  .bk2-video--has-mobile {
    width: min(100%, 420px);
    aspect-ratio: 9 / 16;
  }

  .bk2-video--has-mobile .bk2-video__poster--desktop {
    display: none;
  }

  .bk2-video--has-mobile .bk2-video__poster--mobile {
    display: block;
  }
}

/* Duur-chip verbergen als er geen duur bekend is */
.bk2-video__time:empty {
  display: none;
}

/* Twee opties: twee kolommen, gecentreerd */
.bk2-cards--two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 940px);
  margin-inline: auto;
}

.bk2-cards--two-up > .bk2-card {
  grid-column: auto;
}

@media (max-width: 760px) {
  .bk2-cards--two-up {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Wat wordt er van de ouders verwacht?": twee kolommen op brede schermen */
.bk2-post-list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

@media (max-width: 760px) {
  .bk2-post-list--two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Optioneel cadeaumoment: melding onder de programma-stappen */
.bk2-notice--gift {
  align-items: center;
  gap: 16px;
  justify-self: center;
  width: min(100%, 760px);
  padding: 16px 20px;
  border: 3px dashed var(--opt, var(--bk2-orange));
  border-radius: 16px;
  background: #fff;
}

.bk2-notice--gift .bk2-notice__icon.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--opt, var(--bk2-orange));
  color: var(--opt-ink, #fff);
  font-size: 24px;
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}

.bk2-notice--gift > span:last-child {
  font-weight: 600;
  line-height: 1.45;
}

.bk2-notice--gift strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--bk2-font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

/* Foto's van de feestruimte */
.bk2-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.bk2-room {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--bk2-line);
  border-radius: 14px;
  background: var(--bk2-soft);
}

.bk2-room img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-room figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--brick);
  color: var(--brick-ink);
  font-family: var(--bk2-font-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 3px 0 var(--brick-dark);
}

@media (max-width: 760px) {
  .bk2-rooms {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Toegang tot het Bouwkasteel: melding met link, en links in de programmastappen */
.bk2-notice--kasteel > span:last-child .bk2-link {
  display: inline-block;
  margin-top: 6px;
}

.bk2-step__body a {
  color: var(--bk2-blue);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Fotogalerij ---------- */
.bk2-gallery {
  display: grid;
  gap: 18px;
  width: min(100%, 1080px);
  margin: clamp(32px, 4vw, 48px) auto 0;
}

.bk2-gallery__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1400 / 820;
  border: 6px solid #fff;
  border-radius: 26px;
  background: var(--bk2-ink);
  box-shadow: 0 10px 0 rgba(21, 25, 43, 0.12), 0 30px 60px rgba(6, 30, 70, 0.18);
}

.bk2-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.bk2-gallery__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.bk2-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-gallery__slide figcaption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  gap: 2px;
  max-width: min(460px, calc(100% - 40px));
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}

.bk2-gallery__slide figcaption strong {
  font-family: var(--bk2-font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.bk2-gallery__slide figcaption span {
  color: var(--bk2-muted);
  font-size: 0.95rem;
}

.bk2-gallery__control {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--bk2-yellow-dark);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bk2-gallery__control:hover {
  transform: translateY(-2px);
}

.bk2-gallery__control:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--bk2-yellow-dark);
}

.bk2-gallery__control--prev { left: 18px; }
.bk2-gallery__control--next { right: 18px; }

.bk2-gallery__thumbs {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 12px;
}

.bk2-gallery__thumbs button {
  overflow: hidden;
  aspect-ratio: 240 / 140;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  opacity: 0.7;
  box-shadow: 0 4px 0 rgba(21, 25, 43, 0.12);
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.bk2-gallery__thumbs button:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.bk2-gallery__thumbs button.is-active {
  border-color: var(--bk2-yellow);
  opacity: 1;
  box-shadow: 0 4px 0 var(--bk2-yellow-dark);
}

.bk2-gallery__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

@media (max-width: 640px) {
  .bk2-gallery__stage {
    aspect-ratio: 4 / 3;
    border-width: 4px;
    border-radius: 20px;
  }

  .bk2-gallery__slide figcaption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
    padding: 10px 14px;
  }

  .bk2-gallery__control {
    top: 38%;
    width: 44px;
    height: 44px;
  }

  .bk2-gallery__control--prev { left: 10px; }
  .bk2-gallery__control--next { right: 10px; }

  .bk2-gallery__thumbs {
    gap: 8px;
  }
}

/* Toelichting onder de keuzeknoppen, vóór de foto's */
.bk2-option-intro {
  display: grid;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
}

.bk2-option-intro__text {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--bk2-muted);
  font-size: 1.12rem;
  text-align: center;
}

.bk2-gallery[hidden],
.bk2-gallery [hidden] {
  display: none;
}

#beschikbaarheid .bk2-gallery__thumbs button.is-active {
  border-color: var(--opt);
  box-shadow: 0 4px 0 var(--opt-dark);
}

#beschikbaarheid .bk2-gallery__control {
  background: var(--opt);
  color: var(--opt-ink);
  box-shadow: 0 5px 0 var(--opt-dark);
}

/* Foto's: op desktop standaard compact, met knop om groot te bekijken. Op mobiel altijd groot, zonder knop. */
@media (min-width: 641px) {
.bk2-gallery--compact {
  width: min(100%, 640px);
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
}

.bk2-gallery--compact .bk2-gallery__stage {
  aspect-ratio: 16 / 8;
  border-width: 4px;
  border-radius: 20px;
}

.bk2-gallery--compact .bk2-gallery__slide figcaption {
  right: 12px;
  bottom: 12px;
  left: 12px;
  max-width: none;
  padding: 8px 12px;
}

.bk2-gallery--compact .bk2-gallery__slide figcaption strong {
  font-size: 1.05rem;
}

.bk2-gallery--compact .bk2-gallery__slide figcaption span {
  font-size: 0.85rem;
}

.bk2-gallery--compact .bk2-gallery__control {
  width: 40px;
  height: 40px;
  margin-top: -28px;
  font-size: 1.2rem;
}

.bk2-gallery--compact .bk2-gallery__control--prev { left: 10px; }
.bk2-gallery--compact .bk2-gallery__control--next { right: 10px; }

.bk2-gallery--compact .bk2-gallery__thumbs {
  gap: 8px;
}

.bk2-gallery--compact .bk2-gallery__thumbs button {
  border-width: 3px;
  border-radius: 10px;
}
}

.bk2-gallery__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: center;
  padding: 9px 18px;
  border: 3px solid var(--opt, var(--bk2-blue));
  border-radius: 999px;
  background: #fff;
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--opt-dark, var(--bk2-blue-dark));
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bk2-gallery__toggle:hover {
  transform: translateY(-2px);
}

.bk2-gallery__toggle:active {
  transform: translateY(3px);
  box-shadow: none;
}

.bk2-gallery__toggle .material-symbols-outlined {
  font-size: 22px;
}

.bk2-gallery__toggle[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .bk2-gallery__toggle {
    display: none;
  }
}

/* "Het programma" boven de stappen */
.bk2-steps-shell__label {
  margin: 0;
  justify-self: center;
  color: var(--opt-text, var(--bk2-ink));
  font-family: var(--bk2-font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
}

/* Verborgen optiedelen blijven echt verborgen */
.bk2-option-panel[hidden] {
  display: none;
}

/* "Stel je feestje samen": compact, zonder uitklappers; categorienamen als kopjes */
.bk2-addon-groups {
  gap: 22px;
}

.bk2-addon-group {
  display: grid;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bk2 .bk2-addon-group__heading {
  margin: 0;
  color: var(--opt-text, var(--bk2-ink));
  font-family: var(--bk2-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.bk2-addon-list li {
  align-items: center;
}

.bk2-prices__details {
  display: grid;
  gap: 2px;
  min-width: 0;
  justify-items: start;
}

.bk2-prices__details strong {
  font-weight: 800;
}

.bk2-prices__details small {
  color: var(--bk2-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.bk2-prices__details .bk2-btn {
  margin: 6px 0 0;
}

/* Foto op bijboek-kaart blijft altijd binnen het 16:9-vak */
.bk2-addon-card__media {
  position: relative;
  overflow: hidden;
}

.bk2-addon-card__media img {
  position: absolute;
  inset: 0;
}

/* Losse bijboek-kaarten zonder foto */
.bk2-addon-card__price--free {
  color: #075c28;
}

.bk2-addon-card__body .bk2-btn {
  margin: 4px 0 0;
}

/* "Stel je feestje samen": categorieën zijn weer in- en uitklapbaar (details/summary) */
.bk2-addon-groups {
  gap: 12px;
}

.bk2-addon-group {
  display: block;
  border: 3px solid var(--bk2-line);
  border-radius: 14px;
  background: #fff;
}

.bk2-addon-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 11px;
  list-style: none;
  cursor: pointer;
}

.bk2-addon-group__summary::-webkit-details-marker {
  display: none;
}

.bk2-addon-group__summary:hover {
  background: var(--bk2-soft);
}

.bk2-addon-group__title {
  font-family: var(--bk2-font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.bk2-addon-group__title small {
  color: var(--bk2-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.bk2-addon-group__indicator::before {
  content: "+";
}

.bk2-addon-group[open] > .bk2-addon-group__summary .bk2-addon-group__indicator::before {
  content: "\2212";
}

.bk2-addon-group__panel {
  padding: 4px 18px 18px;
}

/* Wie doet wat: kopjes boven de twee lijsten in één blok */
.bk2 .bk2-roles__title {
  margin: 4px 0 -4px;
  color: var(--opt-text, var(--bk2-ink));
  font-family: var(--bk2-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.bk2-roles__title + .bk2-post-list + .bk2-roles__title {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 3px dashed var(--bk2-line);
}

/* Terugverwijzing naar de optiekaart (in plaats van het blok Samengevat) */
.bk2-post-card__back {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 3px dashed var(--bk2-line);
  color: var(--bk2-muted);
  font-weight: 600;
}

.bk2-post-card__back .bk2-link {
  margin-left: 4px;
}

/* Mobiel: de keuzeknoppen A/B/C worden één compacte, vaste rij die meescrolt.
   Pas --bk2-tabs-top aan als het menu van de website hoger of lager is (nu 72px). */
@media (max-width: 640px) {
  .bk2-tabs {
    position: sticky;
    top: var(--bk2-tabs-top, 72px);
    z-index: 20;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 20px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(234, 242, 251, 0.97);
    box-shadow: 0 6px 16px rgba(6, 30, 70, 0.16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .bk2-tab {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 3px 0 var(--brick-dark);
  }

  .bk2-tab::before,
  .bk2-tab__flag,
  .bk2-tab__copy small {
    display: none;
  }

  .bk2-tab__badge {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }

  .bk2-tab__copy strong {
    font-size: 0.8rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .bk2-tab[aria-pressed="true"] {
    transform: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brick-dark);
  }
}

/* Vast bovenaan via JS (werkt ook als het thema position: sticky blokkeert) */
@media (max-width: 640px) {
  .bk2-tabs.is-stuck {
    position: fixed;
    top: var(--bk2-tabs-top, 72px);
    right: 16px;
    left: 16px;
    z-index: 50;
    margin: 0;
  }
}

/* Foto's na de beschrijving: altijd 4:3 */
.bk2-gallery .bk2-gallery__stage {
  aspect-ratio: 4 / 3;
}

.bk2-gallery {
  width: min(100%, 800px);
}

@media (min-width: 641px) {
  .bk2-gallery--compact {
    width: min(100%, 520px);
  }

  .bk2-gallery--compact .bk2-gallery__stage {
    aspect-ratio: 4 / 3;
  }
}

/* Mobiel: de tekstbubbel staat onder de foto in plaats van erop, zodat de foto volledig zichtbaar is */
@media (max-width: 640px) {
  .bk2-gallery .bk2-gallery__stage {
    aspect-ratio: auto;
    background: #fff;
  }

  .bk2-gallery .bk2-gallery__slide {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .bk2-gallery .bk2-gallery__slide.is-active {
    display: block;
  }

  .bk2-gallery .bk2-gallery__slide img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .bk2-gallery .bk2-gallery__slide figcaption {
    position: static;
    max-width: none;
    padding: 12px 14px 14px;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  /* Pijltjes in het midden van de foto (foto is 4:3 en even breed als het scherm min de marges) */
  .bk2-gallery .bk2-gallery__control {
    top: calc((100vw - 40px) * 0.375);
    margin-top: -22px;
  }
}

/* Tabknoppen mobiel: elk label minstens twee regels hoog, zodat alle drie gelijk zijn */
@media (max-width: 640px) {
  .bk2-tab__copy strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2em;
  }
}

/* Aanbevolen leeftijd onder de themanaam */
.bk2-theme-age {
  display: block;
  margin-top: 2px;
  color: var(--bk2-muted, #4a5a70);
  font-size: .8rem;
  font-weight: 600;
}

/* Aanbevolen leeftijd als bubbel naast de themanaam */
.bk2-prices__list li > span:has(.bk2-theme-age) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.bk2-prices__list .bk2-theme-age {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eaf2fb;
  box-shadow: inset 0 0 0 2px #c5d6ec;
  color: var(--bk2-ink);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

/* Thema-keuze als eerste onderdeel van "Stel jullie feestje samen" */
.bk2-compose-theme {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 3px dashed var(--bk2-line);
}

.bk2-compose-theme .bk2-roles__title {
  margin: 0;
}

/* Thema-kaarten in "Stel jullie feestje samen": aanbevolen leeftijd als bubbel */
.bk2-addon-card .bk2-theme-age {
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eaf2fb;
  box-shadow: inset 0 0 0 2px #c5d6ec;
  color: var(--bk2-ink);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.3;
}

.bk2-addon-group__panel > .bk2-post-card__note {
  margin: 0 0 14px;
}

/* Mobiel: A/B/C-knoppen helemaal bovenaan, in een bredere balk met blur, zodat ze niet los boven de pagina zweven */
@media (max-width: 640px) {
  .bk2-tabs {
    top: var(--bk2-tabs-top, 0px);
  }

  .bk2-tabs.is-stuck {
    top: var(--bk2-tabs-top, 0px);
    right: 0;
    left: 0;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 10px;
    border-bottom: 1px solid rgba(6, 68, 127, 0.14);
    border-radius: 0;
    background: rgba(234, 242, 251, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 8px 18px rgba(6, 30, 70, 0.14);
  }
}

/* Mobiel: de pijl op de verwijskaarten blijft zichtbaar, zodat het duidelijk een knop is */
@media (max-width: 640px) {
  .bk2-ref {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .bk2-ref__arrow {
    display: grid;
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }
}

/* Link onder "Handig om te weten" (opent in een nieuw tabblad) */
.bk2-know__more {
  margin: 22px 0 0;
  text-align: center;
}

/* Optiekaarten: prijs bovenaan, daaronder twee knoppen naast elkaar (Boeken geel, Meer info blauw) */
.bk2-opt__footer {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.bk2-opt__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bk2-opt__actions .bk2-btn {
  width: 100%;
  margin-bottom: 5px;
  padding-right: 10px;
  padding-left: 10px;
  white-space: nowrap;
}

/* ---------- Hero: knop "Bekijk de locatie" ---------- */
.bk2-hero__video {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22), 0 12px 24px rgba(0, 0, 0, 0.2);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.bk2-hero__video:hover {
  transform: translateY(-2px);
}

.bk2-hero__video:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

.bk2-hero__video-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  box-shadow: inset 0 -3px 0 var(--bk2-yellow-dark);
}

.bk2-hero__video-icon svg {
  width: 52%;
  height: 52%;
  margin-left: 6%;
  fill: currentColor;
}

.bk2-hero__video-time {
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--bk2-soft);
  color: var(--bk2-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .bk2-hero__video {
    top: 12px;
    right: 12px;
    padding: 6px 12px 6px 6px;
    font-size: 0.9rem;
  }

  .bk2-hero__video-icon {
    width: 32px;
    height: 32px;
  }
}

/* Videovenster */
.bk2-modal__dialog--video {
  width: min(960px, 100%);
}

.bk2-modal__videobox {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
}

.bk2-modal__videobox video,
.bk2-modal__videobox iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

/* ---------- Strook onder het programma: "Bevalt dit programma?" ---------- */
.bk2-book-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  justify-self: center;
  width: min(100%, 860px);
  padding: 18px 22px;
  border: 3px dashed var(--opt, var(--bk2-blue));
  border-radius: 18px;
  background: #fff;
}

.bk2-book-strip__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bk2-book-strip__copy strong {
  color: var(--opt-text, var(--bk2-ink));
  font-family: var(--bk2-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
}

.bk2-book-strip__copy span {
  color: var(--bk2-muted);
  font-weight: 700;
}

.bk2-book-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 640px) {
  .bk2-book-strip {
    padding: 16px;
  }

  .bk2-book-strip__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .bk2-book-strip__actions .bk2-btn {
    width: 100%;
    padding-right: 8px;
    padding-left: 8px;
    white-space: nowrap;
  }
}

/* "1-2-3 Bouwen maar!" alleen op mobiel; op desktop staan de boekknoppen al in de hero, op de kaarten en onder het programma */
@media (min-width: 641px) {
  #boeken-programma {
    display: none;
  }
}

/* ---------- Slank videoblok onder de hero-knoppen ---------- */
.bk2-videoteaser {
  --stud-inset: 24px;
  position: relative;
  display: grid;
  grid-template-columns: clamp(170px, 24vw, 280px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  width: calc(100% - 2 * clamp(16px, 4vw, 60px));
  margin: 60px auto -26px;
  padding: 12px clamp(14px, 2vw, 26px) 12px 12px;
  border: 4px solid var(--brick);
  border-radius: 20px;
  background: #fff;
  color: var(--bk2-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 0 var(--brick-dark), 0 18px 30px rgba(6, 30, 70, 0.1);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.bk2-videoteaser:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 var(--brick-dark), 0 22px 34px rgba(6, 30, 70, 0.14);
}

.bk2-videoteaser:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 var(--brick-dark);
}

.bk2-videoteaser__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--bk2-ink);
}

.bk2-videoteaser__thumb img,
.bk2-videoteaser__thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-videoteaser__thumb::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 18, 45, 0.45) 0%, transparent 55%);
  content: "";
  pointer-events: none;
}

.bk2-videoteaser__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  box-shadow: 0 4px 0 var(--bk2-yellow-dark), 0 10px 20px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease;
}

.bk2-videoteaser:hover .bk2-videoteaser__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.bk2-videoteaser__play svg {
  width: 44%;
  height: 44%;
  margin-left: 6%;
  fill: currentColor;
}

.bk2-videoteaser__time {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(21, 25, 43, 0.82);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.bk2-videoteaser__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bk2-videoteaser__copy small {
  color: var(--bk2-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bk2-videoteaser__copy strong {
  font-family: var(--bk2-font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
}

.bk2-videoteaser__copy > span {
  color: var(--bk2-muted);
  font-size: 1rem;
}

.bk2-videoteaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--bk2-blue);
  color: #fff;
  font-family: var(--bk2-font-display);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--bk2-blue-dark);
}

@media (max-width: 760px) {
  .bk2-videoteaser {
    grid-template-columns: 124px minmax(0, 1fr);
    width: 100%;
    margin-top: 26px;
    padding: 10px 12px 10px 10px;
    border-radius: 18px;
    box-shadow: 0 6px 0 var(--brick-dark);
  }

  .bk2-videoteaser__play {
    width: 40px;
    height: 40px;
  }

  .bk2-videoteaser__copy > span,
  .bk2-videoteaser__cta {
    display: none;
  }

  .bk2-videoteaser__copy strong {
    font-size: 1.15rem;
  }
}

/* Videoblok: als blauw steentje, even breed als de grote foto's (max 800px) */
.bk2-videoteaser {
  --stud-inset: 22px;
  grid-template-columns: clamp(150px, 28%, 230px) minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 22px);
  width: min(100%, 800px);
  margin: 60px auto -26px;
  padding: 14px 20px 14px 14px;
  border: 0;
  border-radius: 18px;
  background: var(--brick);
  color: var(--brick-ink);
  box-shadow: 0 7px 0 var(--brick-dark), 0 20px 34px rgba(6, 30, 70, 0.2);
}

.bk2-videoteaser:hover {
  box-shadow: 0 10px 0 var(--brick-dark), 0 24px 36px rgba(6, 30, 70, 0.22);
}

.bk2-videoteaser:active {
  box-shadow: 0 2px 0 var(--brick-dark), 0 10px 20px rgba(6, 30, 70, 0.2);
}

.bk2-videoteaser__thumb {
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

.bk2-videoteaser__play {
  width: 46px;
  height: 46px;
}

.bk2-videoteaser__copy small {
  color: rgba(255, 255, 255, 0.82);
}

.bk2-videoteaser__copy strong {
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

.bk2-videoteaser__copy > span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.bk2-videoteaser__cta {
  padding: 10px 16px;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  box-shadow: 0 4px 0 var(--bk2-yellow-dark);
}

@media (max-width: 760px) {
  .bk2-videoteaser {
    grid-template-columns: 124px minmax(0, 1fr);
    width: 100%;
    margin-top: 26px;
    padding: 10px 14px 10px 10px;
    box-shadow: 0 6px 0 var(--brick-dark);
  }

  .bk2-videoteaser__play {
    width: 38px;
    height: 38px;
  }
}

/* Videoblok: wat meer ruimte boven (bij de heroknoppen), wat minder eronder */
.bk2-videoteaser {
  margin: 60px auto -26px;
}

@media (max-width: 760px) {
  .bk2-videoteaser {
    margin: 38px 0 -14px;
  }
}

/* Korte introtekst tussen de hero-knoppen en het videoblok */
.bk2-hero__intro {
  width: min(100%, 800px);
  margin: 40px auto 0;
  color: var(--bk2-muted);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.bk2-hero__intro + .bk2-videoteaser {
  margin-top: 30px;
}

@media (max-width: 760px) {
  .bk2-hero__intro {
    margin-top: 30px;
    font-size: 1.02rem;
  }

  .bk2-hero__intro + .bk2-videoteaser {
    margin-top: 24px;
  }
}

/* Handig om te weten: kaart "Waar vind je ons?" over de volle breedte */
.bk2-facilities > .bk2-facility--where {
  flex-basis: 100%;
}

.bk2-facility--where address {
  display: block;
  color: var(--bk2-ink);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 761px) {
  .bk2-facilities > .bk2-facility--where {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 22px;
    row-gap: 2px;
    padding: 22px 26px;
  }

  .bk2-facility--where .bk2-facility__icon.material-symbols-outlined {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .bk2-facility--where .bk2-facility__title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .bk2-facility--where address {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .bk2-facility--where > p {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .bk2-facility--where .bk2-facility__action {
    grid-column: 4;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

/* Tijdelijk: "Boeken →"-knoppen verborgen (zie boeken_knoppen_tonen bovenin het .rain-bestand) */
.bk2--geen-boeken .bk2-btn--boeken {
  display: none;
}

.bk2--geen-boeken .bk2-opt__actions,
.bk2--geen-boeken .bk2-book-strip__actions {
  grid-template-columns: minmax(0, 1fr);
}

/* Tijdelijk fotoblok (link) in de stijl van het videoblok */
.bk2 a.bk2-videoteaser {
  color: var(--brick-ink);
  text-decoration: none;
}

.bk2-videoteaser__play .material-symbols-outlined {
  font-size: 24px;
}

/* Preview-versies via ?preview=2026 (zonder Kinderworkshop) en ?preview=2027 (met Kinderworkshop) */
html[data-bk2-preview="2026"] .bk2-ws,
html[data-bk2-preview="2026"] .bk2-only-2027 {
  display: none !important;
}

/* "Waar vind je ons?" op desktop: icoon, tekst en knop netjes op één lijn */
@media (min-width: 761px) {
  .bk2-facilities > .bk2-facility--where {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 4px;
    padding: 24px 30px;
  }

  .bk2-facility--where .bk2-facility__icon.material-symbols-outlined {
    grid-row: 1 / span 3;
    width: 64px;
    height: 64px;
    font-size: 34px;
  }

  .bk2-facility--where .bk2-facility__title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 1.35rem;
  }

  .bk2-facility--where address {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    line-height: 1.45;
  }

  .bk2-facility--where > p {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.95rem;
  }

  .bk2-facility--where .bk2-facility__action {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0;
  }
}

/* Tijdelijk: foto's bij de bijboek-kaarten verborgen (zie addon_fotos_tonen bovenin het .rain-bestand) */
.bk2--geen-addonfotos .bk2-addon-card__media {
  display: none;
}

/* "Waar vind je ons?" is een gewone Handig-om-te-weten-kaart */
.bk2-facility address {
  display: block;
  color: var(--bk2-ink);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

/* Tijdelijk: hero-banner verborgen (zie hero_banner_tonen bovenin het .rain-bestand); de knoppen staan dan gewoon onder elkaar */
.bk2--geen-hero .bk2-quick {
  margin-top: 0;
}

/* Kinderworkshop: oranje label vanaf een bepaalde datum (workshop_vanaf_label) */
.bk2-tab__flag--orange {
  background: var(--bk2-orange);
  color: var(--bk2-ink);
  box-shadow: 0 3px 0 var(--bk2-orange-dark);
}

.bk2-notice--soon {
  align-items: center;
  justify-self: center;
  width: min(100%, 760px);
  margin-top: 28px;
  margin-bottom: clamp(20px, 3vw, 32px);
  border: 3px solid var(--bk2-orange);
  background: #fff4dd;
}

/* Tijdelijk: foto-slideshows verborgen (zie fotogalerij_tonen bovenin het .rain-bestand) */
.bk2--geen-galerij .bk2-gallery {
  display: none;
}

/* Kinderworkshop: keuze tussen RaceLab, BattleBots en BrickLab boven het programma */
.bk2-workshop-choice {
  margin-top: clamp(32px, 4vw, 48px);
}

.bk2-workshop-choice__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.bk2-workshop-choice .bk2-addon-card {
  border-top: 8px solid var(--opt, var(--bk2-green));
  box-shadow: 0 6px 0 rgba(21, 25, 43, 0.08);
}

.bk2-addon-card__flow {
  margin: 2px 0 0;
  color: var(--opt-text, var(--bk2-ink));
  font-family: var(--bk2-font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .bk2-workshop-choice__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kinderworkshop: eigen keuzeknoppen (RaceLab / BattleBots / BrickLab), niet vast bovenaan */
.bk2-workshop-choice {
  display: grid;
  gap: 24px;
  margin-top: clamp(32px, 4vw, 48px);
}

.bk2-tabs--static,
.bk2-tabs.bk2-tabs--static.is-stuck {
  margin-top: 0;
}

@media (max-width: 640px) {
  .bk2-tabs.bk2-tabs--static {
    position: static;
    padding: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.bk2-tab__badge .material-symbols-outlined {
  font-size: 24px;
}

.bk2-workshop-panel {
  display: grid;
  gap: 24px;
}

.bk2-workshop-panel[hidden] {
  display: none;
}

/* Tijdelijk: foto's bij de workshop-programmastappen verborgen (zie workshop_programma_fotos_tonen bovenin het .rain-bestand) */
.bk2--geen-workshopfotos .bk2-workshop-panel .bk2-step__image {
  display: none;
}

/* ---------- Foto's-venster (opent vanaf het blok "Ontdek MADEinBILLUND") ---------- */
/* Nieuw fotovenster alleen zonder ?preview=…; het oude fotoblok (link naar nieuw tabblad) alleen mét ?preview=… (zie flag foto_blok_in_preview) */
html[data-bk2-preview] .bk2-only-dev {
  display: none !important;
}

html:not([data-bk2-preview]) .bk2-only-preview {
  display: none !important;
}

.bk2-modal__dialog--photos {
  width: min(1080px, 100%);
}

.bk2 .bk2-photos__intro {
  margin: -6px 0 0;
  color: var(--bk2-muted);
}

.bk2-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.bk2-photos__grid[hidden],
.bk2-photos__viewer[hidden] {
  display: none;
}

.bk2-photos__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--bk2-line);
  border-radius: 14px;
  background: var(--bk2-soft);
  cursor: zoom-in;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.bk2-photos__thumb:hover,
.bk2-photos__thumb:focus-visible {
  transform: translateY(-3px);
  border-color: var(--brick, var(--bk2-blue));
  box-shadow: 0 6px 0 var(--brick-dark, rgba(0, 0, 0, 0.18));
  outline: none;
}

.bk2-photos__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bk2-photos__viewer {
  display: grid;
  gap: 12px;
}

.bk2-photos__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-right: 48px; /* ruimte voor de sluitknop */
}

.bk2-photos__count {
  color: var(--bk2-muted);
  font-weight: 800;
}

.bk2-photos__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border-radius: 16px;
  background: #0b0d14;
  touch-action: pan-y;
}

.bk2-photos__img {
  display: block;
  width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
  opacity: 1;
  transition: opacity 160ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.bk2-photos__img.is-loading {
  opacity: 0.25;
}

.bk2-photos__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bk2-yellow);
  color: var(--bk2-ink);
  font-family: var(--bk2-font-display);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 4px 0 var(--bk2-yellow-dark), 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bk2-photos__nav:hover {
  transform: translateY(calc(-50% - 2px));
}

.bk2-photos__nav:active {
  transform: translateY(calc(-50% + 2px));
  box-shadow: 0 1px 0 var(--bk2-yellow-dark);
}

.bk2-photos__nav--prev {
  left: 12px;
}

.bk2-photos__nav--next {
  right: 12px;
}

@media (max-width: 640px) {
  .bk2-photos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .bk2-photos__nav {
    width: 42px;
    height: 42px;
  }

  .bk2-photos__nav--prev {
    left: 8px;
  }

  .bk2-photos__nav--next {
    right: 8px;
  }
}