/* =========================================================
   SONSBEEK SHAPES — CLEAN VERSION
   Gebruikt voor index / archive / about
   ========================================================= */

/* DOE MEE — shape-fill + alle shape-randen hover, zonder transitions */

body.editionBG #doemee a.sonsbeek-news-img-hoverblock:hover,
body.editionBG #doemee a.sonsbeek-news-img-hoverblock:focus-visible {
  color: #4E2C2D !important;
}

body.editionBG #doemee a.sonsbeek-news-img-hoverblock:hover .sonsbeek-news-img-shape.yellow,
body.editionBG #doemee a.sonsbeek-news-img-hoverblock:focus-visible .sonsbeek-news-img-shape.yellow {
  background-color: #4E2C2D !important;
}

/* CSS-randen: ellipse / rectangle */
body.editionBG #doemee a.sonsbeek-news-img-hoverblock:hover .shape-border,
body.editionBG #doemee a.sonsbeek-news-img-hoverblock:focus-visible .shape-border {
  border-color: #4E2C2D !important;
  color: #4E2C2D !important;
  stroke: #4E2C2D !important;
}

/* DOE MEE — strokes in <defs> op hover */

body.editionBG:has(#doemee a.sonsbeek-news-img-hoverblock:hover .sonsbeek-news-img-shape.diamond.yellow) #diamondStroke path,
body.editionBG:has(#doemee a.sonsbeek-news-img-hoverblock:focus-visible .sonsbeek-news-img-shape.diamond.yellow) #diamondStroke path {
  stroke: #4E2C2D !important;
}

body.editionBG:has(#doemee a.sonsbeek-news-img-hoverblock:hover .sonsbeek-news-img-shape.star.yellow) #starStroke path,
body.editionBG:has(#doemee a.sonsbeek-news-img-hoverblock:focus-visible .sonsbeek-news-img-shape.star.yellow) #starStroke path {
  stroke: #4E2C2D !important;
}

body.editionBG:has(#doemee a.sonsbeek-news-img-hoverblock:hover .sonsbeek-news-img-shape.trapeze-mirror.yellow) #trapezeStrokeMirrored path,
body.editionBG:has(#doemee a.sonsbeek-news-img-hoverblock:focus-visible .sonsbeek-news-img-shape.trapeze-mirror.yellow) #trapezeStrokeMirrored path {
  stroke: #4E2C2D !important;
}
/* ---------------------------------------------------------
   01. Algemene hoverblock containers
--------------------------------------------------------- */

.sonsbeek-news-img-hoverblock,
.sonsbeek-news-img-hoverblock-archive {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  display: block;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

.sonsbeek-news-img-hoverblock {
  padding-bottom: 100%;
}

.sonsbeek-news-img-hoverblock-archive {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 100%;
}

.sonsbeek-news-img-hoverblock.teaser,
.sonsbeek-news-img-hoverblock-archive.teaser,
.teaser {
  display: block;
  color: inherit;
  padding-bottom: 0 !important;
}

.sonsbeek-news-img-hoverblock:focus-visible,
.sonsbeek-news-img-hoverblock-archive:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   02. Achtergrondbeeld bij hover
--------------------------------------------------------- */

.news-img-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
  object-position: center;
  display: block;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sonsbeek-news-img-hoverblock:hover .news-img-bg,
.sonsbeek-news-img-hoverblock:focus .news-img-bg,
.sonsbeek-news-img-hoverblock:focus-within .news-img-bg,
.sonsbeek-news-img-hoverblock-archive:hover .news-img-bg,
.sonsbeek-news-img-hoverblock-archive:focus .news-img-bg,
.sonsbeek-news-img-hoverblock-archive:focus-within .news-img-bg {
  opacity: 0.3;
}


/* ---------------------------------------------------------
   03. Teaser-verhoudingen
--------------------------------------------------------- */

.teaser-square {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: visible;
}

.teaser-rect {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 74;
  overflow: visible;
}

.teaser-ellipse {
  position: relative;
  width: 100%;
  aspect-ratio: 851 / 648;
  overflow: visible;
}

.teaser-tiltedRect,
.teaser-tiltedRect-archive {
  position: relative;
  width: 100%;
  aspect-ratio: 851 / 670;
  overflow: visible;
}

.teaser-rect-col-md-10 {
  position: relative;
  min-width: 100%;
  height: auto;
  aspect-ratio: 1000 / 620;
  overflow: visible;
}

.teaser-square-col-md-2-diamond,
.teaser-square-col-md-5-diamond {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.teaser-square-col-md-2-diamond {
  width: 120%;
}

.teaser-square-col-md-5-diamond {
  width: 105%;
}

.teaser-diamond-about {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 74;
  overflow: visible;
}

.teaser-diamond-about svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.teaser-diamond-archive {
  position: relative;
  width: 100%;
  aspect-ratio: 851 / 739;
  overflow: visible;
}

.teaser-diamond-archive svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.teaser-square-envelope {
  position: relative;
  width: 100%;
  aspect-ratio: 855 / 933;
  overflow: visible;
}

.teaser-trapeze {
  position: relative;
  width: 100%;
  aspect-ratio: 851 / 758;
  overflow: visible;
}

#doemee .teaser-square-col-md-2-trapeze-mirror {
  position: relative;
  width: 105% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: -5% !important;
  aspect-ratio: 851 / 1192;
  overflow: visible !important;
}

.teaser-artist-ellipse {
  position: relative;
  width: 100%;
  aspect-ratio: 851 / 648;
  overflow: visible;
}

.teaser-artist-ellipse svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.teaser-artist-ellipse .press-img,
.teaser-Sonsbeekpark .press-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  object-fit: unset !important;
  object-position: center center;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.sonsbeek-news-img-hoverblock:hover .press-img,
.sonsbeek-news-img-hoverblock:focus .press-img,
.sonsbeek-news-img-hoverblock:focus-within .press-img {
  opacity: 0;
}

/* ---------------------------------------------------------
   ABOUT — teaser shapes
--------------------------------------------------------- */

.teaser-about-park {
  position: relative;
  width: 100%;
  aspect-ratio: 550 / 720;
  overflow: visible;
}

.teaser-about-park svg,
.about-diamond-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------------------------------------------------------
   04. Algemene shape-laag
--------------------------------------------------------- */

.sonsbeek-news-img-shape {
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sonsbeek-news-img-shape img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  display: block;
  user-select: none;
  pointer-events: none;
}

.sonsbeek-news-img-shape .shape-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible;
}

.sonsbeek-news-img-shape h3 {
  position: relative;
  z-index: 3;
}

.sonsbeek-news-img-shape .shape-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
  border: 0 !important;
  overflow: visible;
}

.sonsbeek-news-img-shape.tiltedRect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: url(#sonsbeekRotatedRect);
  -webkit-clip-path: url(#sonsbeekRotatedRect);
  overflow: hidden;
}

.sonsbeek-news-img-shape.envelope {
  background: transparent !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.sonsbeek-news-img-shape.envelope h3 {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 3;
  color: #6400CA !important;
}

/* ---------------------------------------------------------
   Nieuwe teaser-shapes
--------------------------------------------------------- */

.teaser-book {
  position: relative;
  width: 100%;
  aspect-ratio: 992 / 705;
  overflow: visible;
}

.teaser-triangle {
  position: relative;
  width: 100%;
  aspect-ratio: 992 / 707;
  overflow: visible;
}

.teaser-wieber {
  position: relative;
  width: 100%;
  aspect-ratio: 992 / 681;
  overflow: visible;
}

.teaser-stretched-diamond {
  position: relative;
  width: 100%;
  aspect-ratio: 992 / 704;
  overflow: visible;
}

.teaser-book svg,
.teaser-triangle svg,
.teaser-wieber svg,
.teaser-stretched-diamond svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* ---------------------------------------------------------
   05. Image-shapes met clip-path
--------------------------------------------------------- */

.ellipse {
  clip-path: url(#sonsbeekEllipse);
  -webkit-clip-path: url(#sonsbeekEllipse);
}

.rectangle,
.rectangle-169 {
  clip-path: url(#sonsbeekRectangle);
  -webkit-clip-path: url(#sonsbeekRectangle);
}

.diamond {
  clip-path: url(#sonsbeekDiamond);
  -webkit-clip-path: url(#sonsbeekDiamond);
}

.trapeze {
  clip-path: url(#sonsbeekTrapeze);
  -webkit-clip-path: url(#sonsbeekTrapeze);
}

.trapeze-mirror {
  clip-path: url(#sonsbeekTrapezeMirrored);
  -webkit-clip-path: url(#sonsbeekTrapezeMirrored);
}

.egg {
  clip-path: url(#sonsbeekEgg);
  -webkit-clip-path: url(#sonsbeekEgg);
}

.star {
  clip-path: url(#sonsbeekStar);
  -webkit-clip-path: url(#sonsbeekStar);
}

.book {
  clip-path: url(#sonsbeekBook);
  -webkit-clip-path: url(#sonsbeekBook);
}

.triangle {
  clip-path: url(#sonsbeekTriangle);
  -webkit-clip-path: url(#sonsbeekTriangle);
}

.wieber {
  clip-path: url(#sonsbeekWieber);
  -webkit-clip-path: url(#sonsbeekWieber);
}

.stretched-diamond {
  clip-path: url(#sonsbeekStretchedDiamond);
  -webkit-clip-path: url(#sonsbeekStretchedDiamond);
}

/* ---------------------------------------------------------
   06. CSS-randen voor simpele vormen
   Alleen ellipse / rectangle gebruiken CSS-border.
   SVG-vormen gebruiken <use>.
--------------------------------------------------------- */

.shape-border-book,
.shape-border-triangle,
.shape-border-wieber,
.shape-border-stretched-diamond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: block;
  pointer-events: none;
  overflow: visible;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.ellipse .shape-border {
  border: 1.5px solid #000 !important;
  border-radius: 50%;
}

.rectangle .shape-border,
.rectangle-169 .shape-border {
  border: 1.5px solid #000 !important;
  box-sizing: border-box;
}

body.editionBG .ellipse .shape-border {
  border-color: #6400CA !important;
}

body.editionBG .rectangle .shape-border,
body.editionBG .rectangle-169 .shape-border {
  border-color: #6400CA !important;
}

.shape-border-tiltedRect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   07. Schaalvarianten voor afbeeldingen
--------------------------------------------------------- */

.scale-18 img {
  transform: scale(1.85);
}

.scale-17 img {
  transform: scale(1.75);
}

.scale-15 img {
  transform: scale(1.55);
}

.scale-14 img {
  transform: scale(1.45);
}

.scale-13 img {
  transform: scale(1.35);
}

.scale-12 img {
  transform: scale(1.25);
}


/* ---------------------------------------------------------
   08. Gevulde tekst-shapes
--------------------------------------------------------- */

.yellow {
  background-color: #6400CA;
}

.yellow h3 {
  color: #fff !important;
}

.sonsbeek-news-img-shape h3 {
  position: relative;
  z-index: 3;
  text-align: center;
}

/* =========================================================
   DOE MEE — schone tekst-shapes
   ========================================================= */

#doemee .doemee-shape-link {
  position: relative;
  overflow: visible;
}

#doemee .doemee-ellipse-wrap,
#doemee .teaser-square {
  position: relative;
  overflow: visible;
}

#doemee .doemee-text-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
  z-index: 2;
}

#doemee .doemee-fill,
#doemee .doemee-stroke,
#doemee .doemee-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}

#doemee .doemee-fill {
  z-index: 1;
}

#doemee .doemee-stroke {
  z-index: 2;
}

#doemee .doemee-glow {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#doemee .doemee-glow-ellipse {
  width: 122%;
  height: 122%;
  top: 50%;
  left: 50%;
  inset: auto;
  transform: translate(-50%, -50%);
}

#doemee .doemee-glow-star {
  width: 122%;
  height: 122%;
  top: 50%;
  left: 50%;
  inset: auto;
  transform: translate(-50%, -50%);
  filter: blur(38px) saturate(100%);
}

#doemee .doemee-shape-link:hover .doemee-glow,
#doemee .doemee-shape-link:focus-visible .doemee-glow {
  opacity: 1;
  visibility: visible;
}

#doemee .doemee-text-shape h3 {
  position: relative;
  z-index: 3;
  color: #fff !important;
  text-align: center;
}

/* ---------------------------------------------------------
   10. Doemee hover-glows
--------------------------------------------------------- */

.shape-hover-big,
.shape-hover-medium,
.shape-hover-small,
.shape-hover-small-diamond,
.shape-hover-star {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: opacity, filter;
  z-index: 0;
  overflow: visible !important;
}

.shape-hover-big {
  width: 110%;
  height: 110%;
}

.shape-hover-medium {
  width: 110%;
  height: 110%;
}

.shape-hover-small {
  width: 150%;
  height: 150%;
}

.shape-hover-small-diamond {
  width: 125%;
  height: 125%;
}

.shape-hover-star {
  width: 122%;
  height: 122%;
}

a.sonsbeek-news-img-hoverblock:hover .shape-hover-big,
a.sonsbeek-news-img-hoverblock:focus-visible .shape-hover-big {
  visibility: visible;
  opacity: 1;
  filter: blur(60px) saturate(100%);
}

a.sonsbeek-news-img-hoverblock:hover .shape-hover-medium,
a.sonsbeek-news-img-hoverblock:focus-visible .shape-hover-medium {
  visibility: visible;
  opacity: 1;
  filter: blur(35px) saturate(100%);
}

a.sonsbeek-news-img-hoverblock:hover .shape-hover-small,
a.sonsbeek-news-img-hoverblock:focus-visible .shape-hover-small {
  visibility: visible;
  opacity: 1;
  filter: blur(60px) saturate(100%);
}

a.sonsbeek-news-img-hoverblock:hover .shape-hover-small-diamond,
a.sonsbeek-news-img-hoverblock:focus-visible .shape-hover-small-diamond {
  visibility: visible;
  opacity: 1;
  filter: blur(60px) saturate(100%);
}

a.sonsbeek-news-img-hoverblock:hover .shape-hover-star,
a.sonsbeek-news-img-hoverblock:focus-visible .shape-hover-star {
  visibility: visible;
  opacity: 1;
  filter: blur(38px) saturate(100%);
}

/* ---------------------------------------------------------
   12. Sonsbeek Park teaser
--------------------------------------------------------- */

.park-outline,
.park-outline * {
  vector-effect: non-scaling-stroke;
}

.park-outline {
  stroke-width: 2.1px;
}

.teaser-Sonsbeekpark {
  position: relative;
  width: 100%;
  aspect-ratio: 550 / 720;
  overflow: visible;
}

.teaser-Sonsbeekpark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.teaser-Sonsbeekpark image {
  width: 100%;
  height: 100%;
}

.sonsbeekParkcol .sonsbeek-news-img-hoverblock svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sonsbeekParkcol .sonsbeek-news-img-hoverblock.teaser svg image {
  transform: none !important;
}

/* ---------------------------------------------------------
   13. Mobile correcties
--------------------------------------------------------- */

@media (max-width: 767.98px) {
  .shape-gutter-right-trapeze-lg {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .shape-gutter-right-diamond {
  padding-right: 2.8rem !important;
  }
}


/* =========================================================
   PROGRAMMA — SHAPE-LIJNEN VASTE KLEUR BIJ HOVER
   ========================================================= */

/* SVG-randen met <use> */
body.editionBG #programma .shape-border-wieber,
body.editionBG #programma .shape-border-triangle,
body.editionBG #programma .shape-border-tiltedRect,
body.editionBG #programma .sonsbeek-news-img-shape.trapeze .shape-border,
body.editionBG #programma .shape-border-wieber use,
body.editionBG #programma .shape-border-triangle use,
body.editionBG #programma .shape-border-tiltedRect use,
body.editionBG #programma .sonsbeek-news-img-shape.trapeze .shape-border use {
  color: #6400CA !important;
  stroke: #6400CA !important;
  opacity: 1 !important;
}

/* Dezelfde vaste kleur tijdens hover en focus */
body.editionBG #programma a.sonsbeek-news-img-hoverblock:hover,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:focus,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:focus-visible {
  color: #6400CA !important;
}

body.editionBG #programma a.sonsbeek-news-img-hoverblock:hover svg,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:focus svg,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:focus-visible svg,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:hover use,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:focus use,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:focus-visible use {
  color: #6400CA !important;
  stroke: #6400CA !important;
  opacity: 1 !important;
}

/* CSS-randen: ellipse en rectangle */
body.editionBG #programma .ellipse .shape-border,
body.editionBG #programma .rectangle .shape-border,
body.editionBG #programma .rectangle-169 .shape-border,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:hover .ellipse .shape-border,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:hover .rectangle .shape-border,
body.editionBG #programma a.sonsbeek-news-img-hoverblock:hover .rectangle-169 .shape-border {
  border-color: #6400CA !important;
  opacity: 1 !important;
}

body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:hover,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:focus,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:focus-visible {
  color: #6400CA !important;
}

body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:hover svg,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:focus svg,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:focus-visible svg,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:hover use,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:focus use,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:focus-visible use {
  color: #6400CA !important;
  stroke: #6400CA !important;
  opacity: 1 !important;
}

body.editionBG :is(#programma, #locaties) .ellipse .shape-border,
body.editionBG :is(#programma, #locaties) .rectangle .shape-border,
body.editionBG :is(#programma, #locaties) .rectangle-169 .shape-border,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:hover .ellipse .shape-border,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:hover .rectangle .shape-border,
body.editionBG :is(#programma, #locaties) a.sonsbeek-news-img-hoverblock:hover .rectangle-169 .shape-border {
  border-color: #6400CA !important;
  opacity: 1 !important;
}