html {
  box-sizing: border-box
}

*,
::after,
::before {
  box-sizing: inherit;
}

:root {
  -moz-tab-size: 4;
  tab-size: 4
}

html {
  line-height: 1.15
}

body {
  margin: 0
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  height: 0
}

abbr[title] {
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
pre,
samp {
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

button#showMore {
  width: max-content;
  background-color: transparent;
  padding: 0;
  text-decoration: underline;
  color: white;
}

button#showMore:hover {
  cursor: pointer;
  text-decoration-color: var(--color-primary);
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
select {
  text-transform: none
}

input[type=text], input[type=button] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  }

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .25em .75em .625em
}

legend {
  padding: 0
}

progress {
  vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

/** Fonts */
@font-face {
  font-family: "haarlem-regular";
  src: url(../fonts/haarlem.woff2) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "haarlem-italic";
  src: url(../fonts/haarlem-italic.woff2) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "suisse-regular";
  src: url(../fonts/SuisseIntl-Regular-WebS.woff2) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "suisse-italic";
  src: url(../fonts/SuisseIntl-RegularItalic-WebS.woff2) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "suisse-regular-semi";
  src: url(../fonts/SuisseIntl-SemiBold-WebS.woff2) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "suisse-italic-semi";
  src: url(../fonts/SuisseIntl-SemiBoldItalic-WebS.woff2) format('woff2');
  font-display: swap;
}

:root {
  /** body font size */
  --text-base-size: 1rem;
  --body-line-height: 1.5;
  --heading-line-height: 1.2;

  /** type scale */
  --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
  --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
  --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --step-1: clamp(1.25rem, calc(1.28rem + 0.27vw), 1.56rem);
  --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
  --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
  --step-4: clamp(2.23rem, calc(2.08rem + 1.25vw), 3.05rem);
  --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);

  /** controling the spacing scale */
  --space-unit: 1rem;
  --space-xxxxs: calc(0.125 * var(--space-unit));
  --space-xxxs: calc(0.25 * var(--space-unit));
  --space-xxs: calc(0.275 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
  --space-xxxl: calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
  --component-padding: var(--space-md);

  /** Line-height */
  --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
  --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
  --line-height-multiplier: 1;
  --text-vspace-multiplier: 1;

  /** Font weight */

  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;

  /** Font stack */

  --schreef: "haarlem-regular", Palatino, "Palatino Linotype", "Palatino LT STD", serif;
  --schreef-italic: "haarlem-italic", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

  --schreefloos: "suisse-regular", Geneva, sans-serif;
  --schreefloos-italic: "suisse-italic", Geneva, sans-serif;

  --schreefloos-semibold: "suisse-regular-semi", Geneva, sans-serif;
  --schreefloos-italic-semibold: "suisse-italic-semi", Geneva, sans-serif;

  /** Body margin */

  --body-margin: 4rem;

  /** Color setup, */

  --color-primary: #DF1273;

  /** color contrasts */
  --color-bg: white;
  --color-contrast-lower: hsl(0, 0%, 95%);
  --color-contrast-low: hsl(240, 1%, 83%);
  --color-contrast-medium: hsl(240, 1%, 48%);
  --color-contrast-high: hsl(240, 4%, 20%);
  --color-contrast-higher: #242424;

  /** background-colors */
  --bg-step-0: #FDFDFA;
  --bg-step-1: #DDDBD7;
  --bg-step-2: #D9D7D3;
  --bg-step-3: #CCC8C3;
  --bg-step-4: #BBB6AF;
  --bg-step-5: #AAA49B;
  --bg-step-6: #4C4945;
  --bg-step-7: #242424;

  /** text colors */
  --text-light: #FDFDFA;
  --text-submedium: #BEB8B3;
  --text-medium: #AAA49B;
  --text-dark: #716D67;
  --text-darker: #242424;

  /* feedback colors */

  --color-warning-darker: hsl(46, 100%, 41%);
  --color-warning-dark: hsl(46, 100%, 51%);
  --color-warning: hsl(46, 100%, 61%);
  --color-warning-light: hsl(46, 100%, 71%);
  --color-warning-lighter: hsl(46, 100%, 81%);

  --color-success-darker: hsl(94, 48%, 36%);
  --color-success-dark: hsl(94, 48%, 46%);
  --color-success: hsl(94, 48%, 56%);
  --color-success-light: hsl(94, 48%, 66%);
  --color-success-lighter: hsl(94, 48%, 76%);

  --color-error-darker: hsl(349, 75%, 31%);
  --color-error-dark: hsl(349, 75%, 41%);
  --color-error: hsl(349, 75%, 51%);
  --color-error-light: hsl(349, 75%, 61%);
  --color-error-lighter: hsl(349, 75%, 71%);

  /** Easing */

  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .2, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .50, 1);
  --ease-out-3: cubic-bezier(0, 0, .2, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.2, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .2, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);

  --animation-slide-in-up: slide-in-up .5s var(--ease-3);

  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
}

@keyframes present-yourself {
  to {
    opacity: 1;
    transform: translate(1, 1, 1);
  }
}

@keyframes slide-in-up {
  from {
    transform: translateY(100%)
  }
}

@keyframes slide-in-down {
  from {
    transform: translateY(-100%)
  }
}

.isVisible {
  animation: var(--animation-slide-in-up) forwards;
}

/* Other stuff */
[id] {
  scroll-margin-top: 2em;
}

a,
button {
  touch-action: manipulation;
}

p > a,
.container > a {
  color: currentColor;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

p > a:is(:hover, :focus),
.container > a:is(:hover, :focus) {
  text-decoration-color: var(--color-primary);
  -moz-text-decoration-color: var(--color-primary);
}

a.cta {
  display: inline-block;
  margin-block: 1rem;
  color: white;
  padding: 0.8rem 1.6rem;
  background: var(--color-primary);
}

figure {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  :focus {
    transition: outline-offset 0.25s ease;
    outline-offset: 5px;
  }
}

input {
  font-size: max(16px, 1rem);
}

@media (prefers-reduced-data: reduce) {
  img,
  video {
    display: none;
  }
}

html {
  block-size: 100%;
  min-block-size: 100vh;
  scrollbar-gutter: auto;
}

header {
  z-index: 2;
}

main,
.wrapper--video,
.wrapper--statement {
  position: relative;
  z-index: 1;
  -webkit-transform: translate3d(0,0,0);
}

body {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 100vh;
  background-color: var(--color-bg);
}

body:has(.nav--overlay.visible) {
  overflow: hidden;
}

.container {
  position: relative;
  width: min(80rem, 100vw - var(--body-margin));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--space-sm);
}

/** HEADER */

.logo {
  width: 6rem;
  min-width: 6rem;
  aspect-ratio: 1;
  margin-block-start: 0;
  margin-inline-start: 0;
  will-change: transform;
  transition: transform 0.2s cubic-bezier(.70, 0, 1, 1), margin-top 0.2s cubic-bezier(.70, 0, 1, 1), margin-left 0.2s cubic-bezier(.70, 0, 1, 1);
}

.logo {
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.wrapper--video {
  background: var(--bg-step-1);
  margin-block-start: -100px;
  /* overflow: clip; */
}

.fest {
  background: var(--bg-step-1);
  margin-block-start: -100px;
  overflow: clip;
}

.wrapper--video .container {
  margin-block-start: -240px;
}

.wrapper--video video {
  display: block;
  width: 100%;
  height: 100svh;
  min-width: 100%;
  z-index: 1;
  margin-block-start: 0;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.wrapper--video-voorstelling video {
  display: block;
  width: 100%;
  height: 400px;
  min-width: 100%;
  z-index: 1;
  margin-block-start: 0;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

@media screen and (max-width: 700px) {
  .wrapper--video.fest .container {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
  }
}

@media screen and (min-width: 700px) {
  .wrapper--video video,
  .wrapper--video-voorstelling video {
    aspect-ratio: 16 / 9;
  }

  .wrapper--video-voorstelling video {
  height: 100svh;
  }
}

.nav-wrapper {
  position: relative;
  width: 100%;

  z-index: 3;
  padding-block-start: var(--space-sm);
  max-height: 85px;
  transition: background-color 0.2s cubic-bezier(.70, 0, 1, 1), backdrop-filter 0.2s cubic-bezier(.70, 0, 1, 1);
}

nav {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-md);
}

nav ul {
  display: flex;
  height: fit-content;
  gap: var(--space-md);
  align-items: baseline;
  list-style: none;
  margin-block-start: 0;
}

nav > ul > li:nth-child(-n+3) {
  font-size: var(--step-1);
}

.home nav a {
  color: var(--text-light);
  text-decoration: none;
}

nav a {
  color: black;
  text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  font-family: var(--schreefloos);
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

nav a:is(:hover, :focus, .active),
body.white--nav nav a:is(:hover, :focus, .active) {
  color: var(--color-primary);
  text-underline-offset: 6px;
  text-decoration: underline;
  text-decoration-color: currentColor;
  -moz-text-decoration-color: currentColor;
}

body.white--nav nav a {
  color: var(--text-light);
  text-decoration: none;
}

body.white--nav nav a:is(:hover, :focus, .active),
body.white--nav nav a:is(:hover, :focus, .active) {
  color: var(--text-light);
  text-underline-offset: 6px;
  text-decoration: underline;
  text-decoration-color: currentColor;
  -moz-text-decoration-color: currentColor;
}

.wrapper--statement {
  background: var(--bg-step-1);
}

.wrapper--statement h1 {
  grid-column: 1 / -1;
  font-size: var(--step-4);
  font-weight: var(--font-weight-1);
  font-family: var(--schreef);
  margin-block: 0;
}

.nav--overlay.visible {
  position: fixed;
  width: 100vw;
  inset: 0;
  top: -20px;
  background-color: var(--color-primary);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 1001;
  overflow-y: scroll;
  animation: var(--animation-slide-in-down) forwards;
  -webkit-animation: var(--animation-slide-in-down) forwards;
}

.nav--overlay.visible a {
  color: var(--text-light);
}

.nav--overlay.visible > ul:not(.close) > li:not(.hideSubmenu):nth-child(-n+3) {
  font-size: var(--step-4);
}

.nav--overlay.visible .logo {
  fill: var(--text-light);
  stroke: var(--text-light);
  width: 5rem;
  height: 5rem;
  top: var(--space-sm);
  left: var(--space-sm);
  margin-inline-start: -32px !important;
}

.nav--overlay.visible a svg g {
  fill: var(--text-light);
}

nav.nav--overlay.visible ul {
  flex-direction: column;
  padding: 0;
}

.hideSubmenu {
  display: none;
  flex-direction: column;
  padding: .5em 0;
  gap: var(--space-sm);
  text-wrap: nowrap;
  position: absolute;
}

.hideSubmenu li a {
  font-size: var(--step--1);
}

.dropdown:hover .hideSubmenu {
  display: flex;
}

.overview {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 300px;
  width: max-content;
  margin-block-end: var(--space-xxl);
  z-index: 3;
  opacity: 0;
  animation: present-yourself 1.5s ease forwards;
  -webkit-animation: present-yourself 1.5s ease forwards;
}

.item {
  display: flex;
  width: min(520px, 100vw - var(--body-margin));
  /* gap: var(--space-md); */
  justify-content: space-between;
  background-color: var(--bg-step-0);
  padding: var(--component-padding);
  font-family: var(--schreef);
  will-change: transform;
}

.item.tablinks.active p {
  font-size: var(--step-2);
  margin: 0;
}

@media screen and (min-width: 520px) {
  .item.tablinks.active p {
    font-size: var(--step-4);
    margin: 0;
  }
}

.item.tablinks.active {
  order: -1;
  animation: var(--animation-slide-in-up);
  -webkit-animation: var(--animation-slide-in-up);
}

.tabcontent {
  display: none;
}

.item p {
  font-size: var(--step-1);
  margin: 0;
}

.item .text p:first-of-type {
  font-family: var(--schreef-italic);
}

.item:is(:hover, :focus) {
  background: var(--color-primary);
  color: var(--text-light);
  transition: all .2s var(--ease-in-3);
  -webkit-transition: all .2s var(--ease-in-3);
  -moz-transition: all .2s var(--ease-in-3);
  -ms-transition: all .2s var(--ease-in-3);
  -o-transition: all .2s var(--ease-in-3);
}

.item:not(.active):is(:hover, :focus) {
  cursor: pointer;
}

.item.item:is(:hover, :focus) a {
  color: var(--text-light);
}

.item a {
  text-align: end;
  align-self: flex-end;
  color: var(--text-darker);
  text-decoration: none;
  font-family: var(--schreefloos);
  transition: all .2s var(--ease-elastic-1);
  -webkit-transition: all .2s var(--ease-elastic-1);
  -moz-transition: all .2s var(--ease-elastic-1);
  -ms-transition: all .2s var(--ease-elastic-1);
  -o-transition: all .2s var(--ease-elastic-1);
}

.item a:is(:hover, :focus) {
  text-underline-offset: 4px;
}

.review {
  display: none;
}

@media screen and (max-width:919px) {
  .nav--overlay ul:not(.menu--link) {
    display: none;
  }

  .nav--overlay.visible ul {
    display: flex;
  }

  .nav--overlay.visible .close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
  }

  .nav--overlay.visible .menu--link {
    display: none;
  }

  .nav--overlay.visible ul:not(.close, .hideSubmenu) {
    margin-block-start: var(--space-lg);
  }

  .dropdown {
    padding-block-end: 0 !important;
  }

  .nav--overlay.visible ul:not(.close) li {
    border-block-end: 1px solid var(--text-light);
    padding-block: var(--component-padding);
    padding-block-start: 0;
    inline-size: 100%;
  }

  .dropdown > a:first-of-type {
    padding-block: var(--component-padding);
    padding-block-start: 0;
    width: 50%;
    float: left;
  }

 #mobileMenu {
    content: "";
    height: 1.5rem;
    width: 50%;
    background-image: url(../img/down-arrow-thin-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    transition: all .2s var(--ease-3);
    -webkit-transition: all .2s var(--ease-3);
    -moz-transition: all .2s var(--ease-3);
    -ms-transition: all .2s var(--ease-3);
    -o-transition: all .2s var(--ease-3);
  }

  .nav--overlay.visible span {
    width: 100%;
  }

  .nav--overlay.visible span > li {
    border-block-end: 0 !important;
  }

  nav span > .search {
    border-inline-end: 1px solid var(--text-light);
  }

  .nav--overlay.visible span > li:is(.switch, .search) {
    display: flex;
    justify-content: center;
    align-content: center;
    padding-block-start: var(--component-padding);
  }

  .nav--overlay.visible li.search svg {
    fill: var(--text-light);
  }

  .showSubmenu {
    display: flex !important;
  }

  .nav--overlay.visible .hideSubmenu {
    position: relative;
    gap: var(--space-md);
    width: 100%;
    display: none;
  }

  .nav--overlay.visible .dropdown .hideSubmenu li:last-of-type {
    border-block-end: none;
  }

}

li.search a {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

li.search svg {
  fill: currentColor;
}

.home .search svg {
  fill: var(--text-light);
}

li.switch {
  display: flex;
  align-self: baseline;
}

li.switch a {
  margin-inline-start: var(--component-padding);
  font-size: var(--step--1);
}

nav span {
  display: flex;
}

nav span a {
  font-size: var(--step--1);
}

.menu--link {
  display: inline;
}

@media screen and (min-width: 920px) {
  ul:is(.menu--link, .close) {
    display: none;
  }

  li.search {
    display: grid;
  }
}

@media screen and (min-width: 768px) {
  .overview {
    grid-column: 1;
  }

  .review {
    grid-column: 3 / 13;
    color: var(--text-light);
    font-size: var(--step-1);
    font-family: var(--schreefloos);
    display: block;
  }

  .item a {
    text-wrap: nowrap ;
    white-space: nowrap;
  }

  .item {
    width: min(620px, 100vw - var(--body-margin));
  }
}

/** MAIN */

main {
  background-color: var(--color-bg);
  margin-block-start: -100px;
}

.home main {
  margin-block-start: 0;
}

main :is(h1, h2, h3, h4, h5, h6) {
  grid-column: 1 / -1;
}

.wrapper--inspiratie {
  background: var(--bg-step-3);
  padding-block-end: var(--space-xl);
}

[class^="wrapper--"] h2 {
  font-size: var(--step-5);
  color: var(--color-contrast-higher);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.wrapper--inspiratie h2 a {
  color: currentColor;
  text-decoration: none;
}

.wrapper--inspiratie h2 a::after {
  content: "";
  display: inline-flex;
  width: 2.625rem;
  height: 2.563rem;
  background-image: url(../img/right-arrow-thin.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-inline-start: var(--space-md);
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.wrapper--inspiratie h2 a:is(:hover, :focus)::after {
  margin-inline-start: var(--space-lg);
}

.wrapper--data h2 {
  font-size: var(--step-4);
  color: var(--text-light);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.wrapper--data > .container > a {
  font-size: var(--step---1);
  color: var(--color-bg);
  text-decoration: none;
  grid-column: 1/-1;
  padding-bottom: var(--space-xs);
  font-family: var(--schreefloos);
}

.wrapper--agenda {
  background: var(--bg-step-4);
}

.wrapper--sociaal {
  background: var(--bg-step-6);
}

.wrapper--sociaal h2 {
  font-size: var(--step-5);
  color: var(--text-light);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
  margin-block-end: 0;
}

.wrapper--sociaal p {
  color: var(--text-light);
  font-size: var(--step-1);
  line-height: var(--body-line-height);
  font-family: var(--schreefloos);
}

.wrapper--sociaal figure {
  aspect-ratio: 1;
  /* max-width: 640px; */
}

.wrapper--sociaal .container {
  grid-template-rows: unset;
}

.wrapper--sociaal .nieuwsbrief {
  display: flex;
  flex-direction: column;
  padding-block-end: var(--component-padding);
}

.wrapper--impressies figure :is(:hover, :focus) {
  cursor: pointer;
  outline: 1px solid var(--color-primary);
  transition: outline-offset 0.25s ease;
  outline-offset: 5px;
}

@media screen and (max-width: 648px) {
  .wrapper--sociaal .container {
    grid-template-rows: unset;
    width: 100vw;
  }

  .wrapper--sociaal .nieuwsbrief {
    padding: var(--component-padding);
  }
  
}

/** STEUN ONS (homepage) */

.wrapper--steun {
  background: var(--bg-step-0);
}

.wrapper--steun h2 {
  margin-block: 0;
}

.wrapper--steun h2 a {
  color: currentColor;
  text-decoration: none;
  font-size: var(--step-5);
}

.wrapper--steun h2 a::after {
  content: "";
  display: inline-flex;
  width: 2.625rem;
  height: 2.563rem;
  background-image: url(../img/right-arrow-thin.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-inline-start: var(--space-md);
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.wrapper--steun h2 a:is(:hover, :focus)::after {
  margin-inline-start: var(--space-lg);
}

.wrapper--steun .section__item--start p a {
  font-size: var(--step-1);
  color: var(--text-darker);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-family: var(--schreefloos);
}

.wrapper--steun .section__item--start p:last-of-type {
  margin-block-start: var(--space-xxxl);
}

.wrapper--steun .section__item--end p {
  font-size: var(--step-4);
  font-family: var(--schreef);
  font-weight: var(--font-weight-4);
  margin-block-start: 0;
  /* line-height: var(--body-line-height); */
}

.two-column--block {
  grid-column: 1 / -1;

  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: 1280px;
  margin: 2rem auto;
}

.section__item {
  flex: 1;
  padding-block: var(--component-padding);
}

.two-column--block:before,
.two-column--textblock:before {
  content: "";
  border: 1px solid var(--color-contrast-low);
  align-self: stretch;
}

.section__item--start {
  order: -1;
}

.section__item--start p {
  line-height: var(--body-line-height);
  font-size: var(--step-1);
  font-family: var(--schreefloos);
}

.section__item--start a {
  font-size: var(--step-2);
  color: var(--text-darker);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-family: var(--schreefloos);
}

@media screen and (min-width: 700px) {
  .two-column--block {
    flex-direction: row;
  }
}

/** Tabel "Binnenkort" */

.wrapper--agenda figure {
  position: relative;
  height: 100svh;
}

.fluf {
  position: absolute;
  bottom: var(--space-lg);
  width: 100%;
}

.overview--voorstellingen tr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

td:is(.voorstelling) {
  width: 100%;
}

td:is(.prijs) {
  margin: 0 0 0 auto;
  display: contents;
}

td:is(.datum) {
  padding-inline-end: var(--space-sm);
}

td {
  padding-block-start: var(--space-sm);
  vertical-align: text-top;
}

.aankondiging {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
}

.aankondiging a:first-of-type {
  color: var(--text-light);
  font-size: var(--step-5);
  font-family: var(--schreef-italic);
  text-decoration: none;
}

.aankondiging a:last-of-type {
  color: var(--text-light);
  font-size: var(--step-3);
  font-family: var(--schreefloos);
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
  -moz-text-decoration-color: transparent;
}

.aankondiging a:last-of-type:is(:hover, :focus) {
  text-decoration-color: currentColor;
  text-underline-offset: 8px;
  -moz-text-decoration-color: currentColor;
}

table {
  grid-column: 1 / -1;
  width: 100%;
  margin-block-end: var(--space-xl);
  padding: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table.data-tickets-voorstellingen tr {
  display: none;
}

table.data-tickets-voorstellingen tr:nth-child(-n+10) {
  display: flex;
  padding-block: var(--space-lg);
} 

tr {
  border-block-start: 1px solid var(--color-contrast-higher);
}

td.voorstelling a {
  margin-block-start: var(--space-sm);
  position: relative;
  display: block;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

td.voorstelling a:is(:hover, :focus) {
  text-underline-offset: 2px;
  color: currentColor;
  text-decoration-color: var(--color-primary);
  -moz-text-decoration-color: var(--color-primary);
}

td:is(.voorstelling) span {
  display: block;
  font-size: var(--step-4);
  font-family: var(--schreef);
  margin-block: 0;
  color: var(--color-contrast-higher);
}

td:is(.voorstelling) span:first-of-type {
  font-family: var(--schreef-italic);
}

td:is(.datum, .locatie, .prijs) {
  font-family: var(--schreefloos);
  vertical-align: top;
  padding-block-start: 0;
}

td p {
  margin-block-start: var(--space-md);
}

td.prijs a {
  margin-block-end: var(--space-md);
  display: block;
  width: 100%;
  color: var(--color-primary);
  text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

td.prijs a:is(:hover, :focus) {
  text-underline-offset: 4px;
  color: var(--color-primary);
  text-decoration-color: currentColor;
  -moz-text-decoration-color: currentColor;
}

.prijs span {
  display: block;
  color: var(--color-primary);
  margin-block: var(--space-xxs);
}

.wrapper--agenda tr:last-of-type a {
  font-family: var(--schreefloos);
  color: var(--text-darker);
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
  -moz-text-decoration-color: transparent;
}

.wrapper--agenda tr:last-of-type a:is(:hover, :focus) {
  text-underline-offset: 4px;
  color: currentColor;
  text-decoration-color: currentColor;
  -moz-text-decoration-color: currentColor;
}

@media screen and (min-width: 768px) {
  .overview--voorstellingen tr {
    flex-direction: unset;
    display: table-row;
  }

  td:is(.voorstelling) {
    width: 48%;
    padding-inline-end: var(--component-padding);
  }

  td:is(.prijs) {
    margin: unset;
    display: revert;
  }

  td {
    padding-block-start: var(--space-sm);
    padding-block-end: var(--space-lg);
    vertical-align: text-top;
  }

  td:is(.datum, .locatie, .prijs) {
    padding-block-start: var(--space-sm);
  }

  .aankondiging a:last-of-type {
    display: flex;
  }

  .aankondiging a:last-of-type::after {
    content: "";
    display: inline-flex;
    align-self: center;
    width: 2rem;
    aspect-ratio: 1;
    background-image: url(../img/right-arrow-thin-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-inline-start: var(--space-md);
  }

  td.prijs a {
    margin-block-start: var(--space-md);
  }
}

@media screen and (min-width: 1200px) {
  .prijs {
    background-image: url(../img/right-arrow-thin.svg);
    background-repeat: no-repeat;
    background-size: 2rem;
    aspect-ratio: 1;
    background-position: right 3rem;
  }

  .locatie {
    width: 25%;
    padding-inline-end: var(--space-md);
  }

  .datum {
    width: 15%;
  }

  td {
    padding-inline-end: var(--space-xs);
  }
}

/** festival pagina */

.wrapper--voorstellingen-festival {
  background: var(--bg-step-1);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
}

.wrapper--voorstellingen-festival h1 {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.festival-title {
  display: inline;
  grid-column: 1 / -1;
  color: var(--text-light);
  margin-block-start: -1.5rem;
}

.festival-title h1 {
  font-size: var(--step-5);
  font-family: var(--schreef);
  margin-block-end: 0;
  font-weight: 100;
  margin-block-start: 0;
}

.festival-title p {
  font-size: var(--step-1);
  color: var(--color-bg);
  font-family: var(--schreefloos);
}

.wrapper--cta {
  background-color: var(--color-primary);
  font-family: var(--schreefloos);
}

.wrapper--cta div[class^="section__item"] a {
  font-weight: var(--font-weight-3);
  font-size: var(--step-3);
  color: var(--text-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.wrapper--cta .section__item a:is(:hover, :focus) {
  text-underline-offset: 4px;
}

.wrapper--highlights {
  background: var(--bg-step-1);
  padding-block-end: var(--space-xl);
}

.wrapper--highlights h2 {
  font-size: var(--step-5);
  color: var(--color-primary);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.wrapper--highlights .item--large figure img,
.wrapper--voorstellingen-festival .item--large figure img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.wrapper--highlights .item--large figure p:first-of-type,
.wrapper--highlights .item--large figure a:first-of-type,
.wrapper--voorstellingen-festival .item--large figure p:first-of-type {
  grid-column: 1;
  grid-row: 1;
  color: var(--text-light);
  margin-inline-start: var(--space-md);
  font-family: var(--schreefloos);
}

.wrapper--highlights .item--large figure .text > .title,
.wrapper--voorstellingen-festival .item--large figure .text > .title {
  color: var(--text-light);
  margin-inline-start: 0;
  align-self: end;
  font-size: var(--step-4);
  font-family: var(--schreef-italic);
  font-weight: var(--font-weight-4);
  margin-block-end: var(--space-md);
  line-height: var(--heading-line-height);
  text-decoration: none;
}

.title > span {
  font-family: var(--schreef);
}

.wrapper--highlights .item--large figure a,
.wrapper--voorstellingen-festival .item--large figure a {
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: end;
}

.wrapper--highlights .item--small .title,
.wrapper--voorstellingen-festival .item--small .title {
  margin-block-end: .75rem;
  font-size: var(--step-2);
  font-family: var(--schreef-italic);
  text-decoration: none;
}

.wrapper--highlights .item--small p,
.wrapper--highlights .item--small a:nth-child(2),
.wrapper--voorstellingen-festival .item-small p {
  margin-block-start: 0;
  text-decoration: none;
}

.wrapper--voorstellingen-festival .wrapper--agenda {
  background-color: var(--bg-step-1);
  padding-block-start: var(--space-xxxl);
}

.wrapper--voorstellingen-festival .wrapper--agenda tr:last-of-type a {
  color: var(--color-primary);
}

.tooltip {
  display: none;
  opacity: 0;
}

td.voorstelling a:is(:hover, :focus) .tooltip {
  display: inline;
  position: absolute;
  top: -100px;
  width: 200px;
  height: 100px;
  z-index: 1001;
  animation: present-yourself .5s ease forwards;
  -webkit-animation: present-yourself .5s ease forwards;
  animation-delay: .5s;
}

.tooltip img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

/** Voorstellingen overzichtspagina */

.wrapper--voorstellingen {
  background: var(--bg-step-1);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
}

.wrapper--voorstellingen h1 {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.wrapper--voorstellingen div[class^="item--"] p,
.wrapper--voorstellingen div[class^="item--"] a:first-of-type,
.wrapper--organisatie-page div[class^="item--"] p,
.wrapper--organisatie-page div[class^="item--"] a:first-of-type {
  font-size: var(--step-2);
  font-family: var(--schreef);
  font-style: normal;
  margin-block-start: 0;
  margin-block-end: 0;
  text-decoration: none;
}

.wrapper--inspiratie-overzicht div[class^="item--"] p,
.wrapper--inspiratie-overzicht div[class^="item--"] a:first-of-type {
  font-size: var(--step-2);
  font-family: var(--schreefloos);
  font-style: normal;
  margin-block-start: 0;
  margin-block-end: 0;
  text-decoration: none;
}

.wrapper--voorstellingen div[class^="item--"] p:first-of-type,
.wrapper--voorstellingen div[class^="item--"] a:first-of-type,
.wrapper--organisatie-page div[class^="item--"] p:first-of-type,
.wrapper--organisatie-page div[class^="item--"] a:first-of-type {
  font-family: var(--schreef-italic);
  margin: 0;
}

.wrapper--inspiratie-overzicht div[class^="item--"] p:first-of-type,
.wrapper--inspiratie-overzicht div[class^="item--"] a:first-of-type {
  font-family: var(--schreefloos);
  margin: 0;
}

.wrapper--voorstellingen div.item--large p,
.wrapper--inspiratie-overzicht div.item--large p  {
  font-size: var(--step-4);
}

.wrapper--voorstellingen .grid--1-2 .item--large > figure > p:first-of-type,
.wrapper--voorstellingen .grid--2-1 .item--large > figure > p:first-of-type,
.wrapper--voorstellingen .grid--1-1 .item--large > figure > p:first-of-type {
    font-size: var(--step--1);
    font-family: var(--schreefloos);
    margin-inline-start: var(--space-md);
    margin-block-start: var(--space-md);
    grid-column: 1;
    grid-row: 1;
    color: var(--text-light);
}

.wrapper--voorstellingen .item--small a:nth-child(2) p {
  font-size: var(--step--1);
  font-family: var(--schreefloos);
}

/** Grid indeling blokken voor voorstellingen, inspiratie etc */

.grid--1-2, .grid--2-1, .grid--2-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(24rem, 100%/3)), 1fr));
  grid-template-rows: minmax(10px, min-content) minmax(10px, min-content);
  gap: var(--component-padding);
}

.grid-wrapper {
  grid-column: 1 / -1;
}

.grid--1-2 .item--large {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  height: 100%;
  background-color: var(--bg-step-0);
}

.grid--1-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(24rem, 100%/3)), 1fr));
  gap: var(--component-padding);
}

.grid--1-1 .item--large {
  aspect-ratio: 1;
  max-width: 100%;
  max-height: 100%;
  background-color: var(--bg-step-0);
}

@media screen and (min-width: 820px) {
  .grid--2-1 .item--large {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    height: 100%;
    background-color: var(--bg-step-0);
  }
}

div[class^="grid--"] {
  margin-block-end: var(--space-md);
}

.item--large figure {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.item--large :is(img, .text) {
  grid-column: 1;
  grid-row: 1;
}

.item--large .text {
  min-width: 0;
  place-self: end start;
  margin-inline-start: var(--space-md);
  margin-inline-end: var(--space-lg);
  margin-block-end: var(--space-md);
  font-family: var(--schreefloos);
}

.item--large .text a:first-of-type {
  text-decoration: none;
}

.item--large .text p {
  font-size: var(--step-3);
  color: var(--text-light);
}

.item--large a {
  color: var(--text-light);
}

.text a {
  text-decoration: none;
  transition: all .2s var(--ease-elastic-1);
  -webkit-transition: all .2s var(--ease-elastic-1);
  -moz-transition: all .2s var(--ease-elastic-1);
  -ms-transition: all .2s var(--ease-elastic-1);
  -o-transition: all .2s var(--ease-elastic-1);
}

.text a:is(:hover, :focus) {
  text-underline-offset: 4px;
}

.item--small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--component-padding);
  background-color: var(--bg-step-0);
}

.item--small .text {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  padding: var(--component-padding) var(--component-padding) var(--component-padding) 0;
  font-family: var(--schreefloos);
}

.item--small .title {
  font-size: var(--step-1);
  margin-block-start: 0;
}

.item--small .text a:first-of-type {
  text-decoration: none;
}

.item--small a {
  color: currentColor;
  margin-block-start: auto;
  margin-block-end: 0;
}

.wrapper--voorstellingen-festival .item--small a:nth-child(2) {
  text-decoration: none;
}

/** voorstelling detail pagina */

.wrapper--voorstellingen-detail {
  background: var(--bg-step-0);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
}

.wrapper--voorstellingen-detail h1 {
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreef);
}

.wrapper--voorstellingen-detail h1 span:first-of-type {
  font-family: var(--schreef-italic);
  display: block;
}

.wrapper--voorstellingen-detail h1 span:nth-child(2) {
  font-family: var(--schreef-italic);
  display: block;
  font-size: var(--step-4);
}

.wrapper--voorstellingen-detail h3 {
  font-size: var(--step-3);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.ticket-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-primary);
  color: var(--text-light);
  padding: var(--component-padding);
  font-size: var(--step--1);
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(80rem, 100vw - var(--body-margin));
  margin: 0 auto var(--space-md) auto;
  font-family: var(--schreefloos);
}

.wachtlijst {
  opacity: .7;
}

.ticket-box p {
  margin: 0;
}

.ticket-box a {
  align-self: end;
  font-family: var(--schreefloos-semibold);
  color: var(--text-light);
  font-size: var(--step-1);
  text-decoration: underline;
  text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
  text-underline-offset: 2px;
  margin-block-end: -2px;
  text-transform: lowercase;
}

.ticket-box a:is(:hover, :focus) {
  text-decoration-color: currentColor;
  -moz-text-decoration-color: currentColor;
  text-underline-offset: 6px;
}

.voorstelling-uitverkocht {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  max-width: 100%;
  margin-right: var(--space-md);
  z-index: 10;
  background-color: var(--bg-step-3);
  padding: 0 var(--space-xs);
}

.voorstelling-uitverkocht p {
  color: var(--color-contrast-high);
  font-size: var(--step--1);
  font-family: var(--schreefloos);
}

.wrapper--video-voorstelling {
  overflow: clip;
  grid-column: 1/-1;
  z-index: 1;
}

.voorstelling-head-foto {
  grid-row: 1 / span 3;
  grid-column: 1 / -1;
}

.voorstelling-head-foto img {
  opacity: 0;
  animation: present-yourself 1.5s ease forwards;
  -webkit-animation: present-yourself 1.5s ease forwards;
}

.voorstelling-head-foto figcaption {
  font-family: var(--schreef-italic);
  font-size: var(--step---1);
  padding: var(--space-xs);
  text-align: end;
}

.voorstelling-informatie {
  grid-column: 1 / -1;
}

.voorstelling-informatie iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin-block-end: var(--space-lg);
}

.wrapper--organisatie-page article .container iframe {
  grid-column: 3/11;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin-block-end: var(--space-lg);
}

.story {
  text-align: left;
  font-family: var(--schreef);
}

.lees-meer {
  text-align: left;
  font-family: var(--schreefloos);
  font-size: var(--step--1);
  margin-block-end: var(--space-xl);
}

.lees-meer p,
.lees-meer li {
  font-family: var(--schreef);
  font-size: var(--step-0);
  line-height: var(--body-line-height);
}

.lees-meer summary {
  display: block;
}

.lees-meer summary::-webkit-details-marker,
.lees-meer summary::marker {
  display: none;
}

.lees-meer summary::before {
  content: "+ ";
}

details.lees-meer[open] summary::before {
  content: "- ";
  margin-block-end: var(--space-xs);
}

.story .container,
.lees-meer .container {
  all: unset;
}

.story p > span {
  font-size: var(--step-3);
  line-height: var(--heading-line-height);
}

.story>p:first-of-type {
  font-size: var(--step-2);
  line-height: var(--body-line-height);
}

.story .container p,
.story .container li {
  font-size: var(--step-1);
  line-height: var(--body-line-height);
}

.voorstelling-informatie .story blockquote p {
  font-family: var(--schreefloos);
  font-size: var(--step-4);
  margin-block: var(--space-lg);
}

.wrapper--data {
  background-color: var(--bg-step-6);
  color: var(--text-light);
  z-index: 21;
  position: relative;
  padding-block-end: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.wrapper--extra-informatie .container p,
.wrapper--extra-informatie .container details {
  grid-column: 1 / -1;
}

.wrapper--extra-informatie .container p:last-child {
  margin-block-end: var(--space-xl);
}

.wrapper--extra-informatie .container details summary {
  display: block;
}

.wrapper--extra-informatie .container details summary::-webkit-details-marker {
  display: none
}

.wrapper--extra-informatie h2::after {
  content: "";
  display: inline-flex;
  transform: rotate(-90deg);
  width: 2.625rem;
  height: 2.563rem;
  background-image: url(../img/left-arrow-thin.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-inline-start: var(--space-md);
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.wrapper--extra-informatie .container p {
  font-family: var(--schreefloos);
  font-size: var(--step--1);
}

.wrapper--extra-informatie h2 {
  border-bottom: 1px solid var(--text-darker);
  color: var(--text-darker);
}

.wrapper--data h2 {
  grid-row: 1;
  color: var(--text-light);
}

.wrapper--data p {
  font-size: smaller;
  grid-column: 1 / -1;
}

.wrapper--data p > a {
  color: var(--text-light);
}

.wrapper--extra-informatie svg {
  grid-column: 10;
  grid-row: 1;
  align-self: center;
}

.data-tickets-voorstellingen {
  text-align: left;
  font-family: var(--schreefloos);
  color: var(--text-light);
  font-size: smaller;
  margin: 0;
  display: flex;
}

/* .data-tickets-voorstellingen .tablehead {
  display: none;
} */

table.data-tickets-voorstellingen tbody:first-of-type {
  display: none;
}

.data-tickets-voorstellingen tr {
  display: flex;
  flex-direction: row;
  gap: 0 var(--component-padding);
  flex-wrap: wrap;
  justify-content: space-between;
}

.data-tickets-voorstellingen tr:first-of-type {
  border-block-start: none;
}

.data-tickets-voorstellingen tr {
  border-block-start: 1px solid var(--text-light);
  border-block-end: none;
}

.data-tickets-voorstellingen td {
  font-size: var(--step-1);
}

.data-tickets-voorstellingen s {
  text-decoration: none;
}

.data-tickets-voorstellingen a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-6);
}

.extra-informatie-arrow {
  fill: var(--text-darker);
}

.wrapper--reviews {
  margin-block-end: var(--space-lg);
}

.review-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--component-padding);
  grid-column: 1 / -1;
}

.voorstelling-quote {
  display: flex;
  flex-direction: column;
  padding: var(--component-padding);
  background-color: var(--color-primary);
}

.voorstelling-quote blockquote {
  color: var(--text-light);
  font-family: var(--schreef);
  margin: 0 0 var(--space-xl);
  font-size: var(--step-2);
}

.voorstelling-quote > p {
  color: var(--text-light);
  font-family: var(--schreefloos);
  font-size: var(--step--1);
  margin: auto 0 0 0;
}

.informatie {
  display: none;
  font-size: var(--step-1);
}

.wrapper--aanbevolen {
  background-color: var(--bg-step-2);
  padding-block-end: var(--space-xl);
}

.wrapper--aanbevolen .grid--1-1 {
  grid-column: 1 / -1;
}

@media screen and (min-width: 600PX) {
  .data-tickets-voorstellingen {
    display: table;
  }

  table.data-tickets-voorstellingen tbody:first-of-type {
    display: table-header-group;
    padding-bottom: var(--space-xxs);
    font-size: var(--bg-step--1);
  }

  table.data-tickets-voorstellingen tr:nth-child(-n+10) {
    display: table-row;
  } 

  .data-tickets-voorstellingen tr:first-of-type {
    border-block-end: 1px solid var(--text-light);
  }

  .data-tickets-voorstellingen tr {
    display: table-row;
  }

  .data-tickets-voorstellingen th {
    padding-block-end: var(--space-sm);
    padding-inline-end: var(--space-sm);
    font-size: var(--step--1);
  }

  .voorstelling-informatie .story blockquote {
    padding: var(--space-xl);
  }

}

@media screen and (min-width: 768px) {
  .ticket-box {
    flex-direction: row;
    justify-content: space-between;
  }

  .ticket-box p {
    align-self: end;
  }
  
  .ticket-box p:last-of-type {
    margin: 0 var(--space-lg) 0 auto;
  }

  .wrapper--voorstellingen-detail h1 {
    grid-row: 1;
    grid-column: 1 / 10;
  }

  .ticket-box-end {
    text-align: end;
  }

  .voorstelling-informatie {
    grid-column: 3 / 11;
  }

  .voorstelling-quote {
  flex: 0 0 32%;
  }

}

:is(.item--small, .item--large) img {
  aspect-ratio: 1;
}

/** Inspiratie (overzicht en detailpagina) */

.wrapper--inspiratie-overzicht {
  background: var(--bg-step-6);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
}

.wrapper--inspiratie--detail {
  background: var(--bg-step-6);
  padding-block-start: calc(var(--space-xxxxl) + 2rem);
  padding-block-end: var(--space-xl);
}

.wrapper--inspiratie--detail .voorstelling-informatie .container {
  all: unset;
}

.wrapper--inspiratie--detail .voorstelling-informatie .container figure.foto {
  height: auto;
}

.wrapper--inspiratie--detail > .voorstelling-informatie > .container > figure > img {
  height: auto;
}

div[class^="wrapper--inspiratie"] h1 {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
  color: var(--text-light);
  margin-block-start: 0;
}

div[class^="wrapper--inspiratie"] .intro {
  color: var(--text-light);
  font-size: var(--step-5);
  margin-block-start: 0;
  font-family: var(--schreef);
  margin-block-end: var(--space-lg);
}

.wrapper--inspiratie-overzicht .item--small .text p {
  margin-block-start: 0;
  font-size: var(--step-1);
}

.terug {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  font-size: var(--step-0);
  color: var(--text-submedium);
  margin-block-end: var(--space-md);
  text-decoration: underline;
  text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.terug:is(:hover, :focus) {
  text-decoration-color: var(--text-submedium);
  -moz-text-decoration-color: var(--text-submedium);
  text-underline-offset: 4px;
}

.terug::before {
  content: "";
  display: inline-flex;
  width: .8rem;
  aspect-ratio: 1;
  background-image: url(/assets/img/left-arrow-thin.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-inline-end: var(--space-sm);
}

.wrapper--inspiratie--detail .container:has(.foto) {
  margin-block-end: var(--space-lg);
}

.wrapper--inspiratie--detail .foto {
  grid-column: 1 / -1;
  opacity: 0;
  animation: present-yourself 1.5s ease forwards;
  -webkit-animation: present-yourself 1.5s ease forwards;
}

.wrapper--inspiratie--detail article {
  margin: 0 auto;
  color: var(--text-light);
  line-height: var(--body-line-height);
  font-family: var(--schreefloos);
}

#date {
  grid-column: 3/12;
  font-size: var(--step--1);
  font-family: var(--schreef);
}

.wrapper--inspiratie--detail article p:first-of-type {
  font-size: var(--step-2);
  grid-column: 2 / 12;
}

.wrapper--inspiratie--detail article p:not(:first-of-type) {
  font-size: var(--step-1);
  grid-column: 2 / 12;
}

article :is(img, video) {
  max-width: 100%;
  grid-column: 1 / -1;
}

article blockquote {
  grid-column: 3 / 11;
  font-family: var(--schreef);
  font-size: var(--step-4);
  line-height: var(--heading-line-height);
  margin: var(--space-lg) auto;
}

.wrapper--inspiratie--detail blockquote {
  color: var(--text-light);
  font-family: var(--schreef);
  font-size: var(--step-4);
  line-height: var(--heading-line-height);
  max-width: 30ch;
  margin: var(--space-lg) auto;
}

.wrapper--inspiratie--detail figcaption {
  text-transform: uppercase;
  font-size: var(--step-0);
  font-family: var(--schreefloos);
  margin-block-start: var(--space-md);
}

.wrapper--inspiratie--detail figcaption:before {
  content: "— ";
}

.wrapper--inspiratie--detail video {
  grid-column: 1 / -1;
  max-width: 100%;
  margin-block-start: var(--space-lg)
}

/** Onderwijs */

.wrapper--onderwijs {
  background: var(--bg-step-1);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
}

div[class^="wrapper--onderwijs"] h1 {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.wrapper--onderwijs .item--large {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.interaction--onderwijs .text--block h3 {
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
  margin-block: 0;
}

.item--large .kop {
  padding-inline: var(--component-padding);
  padding-block-start: var(--space-sm);
  padding-block-end: var(--space-lg);
}

.item--large .kop h2 {
  font-family: var(--schreefloos);
  font-size: var(--step-4);
  font-weight: var(--font-weight-4);
  margin: 0;
}

.intro {
  grid-column: 1 / -1;
}

.intro p {
  grid-column: 1 / -1;
  font-family: var(--schreef);
  font-size: var(--step-2);
  font-weight: var(--font-weight-4);
  margin-block-start: 0;
}

.text--block {
  grid-column: 1 / -1;
}

.interaction--wrapper {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  padding-block: var(--space-lg);
}

.interaction--wrapper .text--block {
  flex: 1 2 60%;
  margin: 0 0 0 auto;
}

.interaction--wrapper .text--block h3 {
  font-size: var(--step-3);
  font-weight: var(--font-weight-4);
  font-family: var(--schreef);
  margin-block-start: 0;
}

.interaction--wrapper .text--block p {
  font-size: var(--step-1);
  font-family: var(--schreef);
}

.btn--group {
  display: flex;
  flex: 1 2 300px;
  flex-direction: column;
  width: 300px;
  gap: var(--component-padding);
}

.btn--group .button {
  font-size: var(--step-3);
  font-family: var(--schreefloos);
  padding-block: var(--component-padding);
  padding-inline: var(--space-sm);
  background: var(--bg-step-2);
  color: black;
  text-decoration: none;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.btn--group .button:is(:hover, :focus) {
  background-color: var(--color-primary);
  color: var(--text-light);
}

.img-text {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {

  .intro,
  .text--block {
    grid-column: 1 / 9;
  }

  .img-text {
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
  }

  .image-text {
    flex: 1;
  }

  .wrapper--organisatie-page .image-text img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .text-image {
    flex: 3;
  }

  .wrapper--onderwijs--detail .text-image {
    flex: 3;
    display: flex;
  }

  .img-text > .text-image > p {
    max-width: 100% !important;
  }

}

.text--block h3 {
  font-size: var(--step-3);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.text--block p {
  font-size: var(--step-2);
  font-family: var(--schreef);
}

.contact-persoon p {
  font-size: var(--step-0);
}

div[class^="wrapper--onderwijs"] blockquote {
  grid-column: 1 / -1;
  font-size: var(--step-3);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
  line-height: var(--heading-line-height);
}

div[class^="wrapper--onderwijs"] blockquote p {
  margin-block-end: 0;
}

blockquote span {
  font-size: var(--step--1);
  margin-block-start: 0;
  font-family: var(--schreefloos);
}

@media screen and (min-width: 768px) {
  div[class^="wrapper--onderwijs"] blockquote {
    grid-column: 6 / 13;
  }
}

.wrapper--onderwijs--detail {
  background: var(--color-bg);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
}

.wrapper--onderwijs--detail .container:has(.foto) {
  margin-block-end: var(--space-lg);
}

.wrapper--onderwijs--detail .foto {
  grid-column: 1 / -1;
  opacity: 0;
  animation: present-yourself 1.5s ease forwards;
  -webkit-animation: present-yourself 1.5s ease forwards;
}

.wrapper--onderwijs--detail .two-column--block h3 {
  font-size: var(--step-3);
  font-weight: var(--font-weight-4);
  font-family: var(--schreef);
}

.wrapper--onderwijs--detail .two-column--block p {
  font-size: var(--step-1);
  font-family: var(--schreef);
  line-height: var(--body-line-height);
}

.wrapper--onderwijs--detail .two-column--block .contact-persoon p {
  font-size: var(--step-0);
  font-family: var(--schreefloos);
}

.cultuur-onderwijs {
  grid-column: 1 / -1;
  font-family: var(--schreefloos);
  display: flex;
  flex-wrap: wrap;
  border-block-start: 1px solid black;
  margin-block-start: var(--space-xxl);
  padding-block-start: var(--space-xxl);
}

@media screen and (min-width: 768px) {
  .cultuur-onderwijs p {
    max-width: 80%;
    align-self: flex-end;
    margin-block-end: 0;
    margin: 0 0 0 auto;
  }
}

/** Over ons */

.wrapper--organisatie {
  background: var(--bg-step-1);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
}

.wrapper--organisatie:has(.contact--organisatie) {
  padding-block-end: 0;
}

.wrapper--organisatie-page {
  background: var(--bg-step-1);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
  min-height: 100svh;
}

.wrapper--organisatie-page:has(.wrapper--archief) {
  padding-block-end: 0;
}

div[class^="wrapper--organisatie"] h1 {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

div[class^="wrapper--organisatie-page"] h1 {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
  margin-block-end: 0;
}

.wrapper--organisatie .sub-title,
.wrapper--organisatie-page .sub-title {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-2);
  font-family: var(--schreef);
  margin-block-start: 0;
  margin-block-end: var(--space-lg);
}

/* 

Deze code werkt vanaf 24 oktober wel in firefox, vandaar onder dit block een fix voor de tussentijd..

.wrapper--organisatie .container:has(.foto),
.wrapper--organisatie-page .container:has(.foto) {
  margin-block: var(--space-lg);
} */

.wrapper--organisatie > .container > .foto,
.wrapper--organisatie-page .container > .foto {
  padding-block: var(--space-lg);
}

.wrapper--organisatie .foto,
.wrapper--organisatie-page .foto {
  grid-column: 1 / -1;
  opacity: 0;
  animation: present-yourself 1.5s ease forwards;
  -webkit-animation: present-yourself 1.5s ease forwards;
}

.wrapper--organisatie article {
  grid-column: 1 / -1;
  width: min(80rem, 100vw - var(--body-margin));
}

.wrapper--organisatie-page article {
  grid-column: 2 / 12;
  width: min(80rem, 100vw - var(--body-margin));
}

.wrapper--organisatie-page .intro {
  grid-column: 1 / 12;
}

.wrapper--organisatie-page .container article .container .intro p {
  font-size: var(--step-2);
  grid-column: 2 / 12;
}

.wrapper--organisatie .intro,
.wrapper--onderwijs--detail .intro p {
  font-size: var(--step-2);
  grid-column: 1 / -1;
}

.wrapper--organisatie article p,
.wrapper--organisatie article ul,
.wrapper--organisatie-page article .container p,
.wrapper--organisatie-page article ul,
.wrapper--onderwijs--detail .container > p {
  grid-column: 1 / 12;
  font-size: var(--step-1);
  font-family: var(--schreef);
  line-height: var(--body-line-height);
}

.wrapper--organisatie-page > .container > article > .container > blockquote {
  grid-column: 2 / 11;
}

.wrapper--organisatie-page > .container > article > .container > blockquote > p {
  font-family: var(--schreefloos);
  font-size: var(--step-2);
  line-height: var(--heading-line-height);
  margin: var(--space-lg) auto;
}

@media screen and (min-width: 768px) {
  .wrapper--organisatie article p,
  .wrapper--organisatie article ul,
  .wrapper--organisatie-page article .container p,
  .wrapper--organisatie-page article ul,
  .wrapper--onderwijs--detail .container p {
    grid-column: 3 / 11;
  }

  .wrapper--organisatie-page .intro {
    grid-column: 3 / 11;
  }

  .wrapper--organisatie .intro,
  .wrapper--onderwijs--detail .intro p {
    font-size: var(--step-2);
    grid-column: 1 / 9;
  }

  .wrapper--organisatie-page > .container > article > .container > blockquote {
    grid-column: 4 / 10;
  }
  
  .wrapper--organisatie-page > .container > article > .container > blockquote > p {
    font-size: var(--step-4);
  }
}

.wrapper--organisatie article .container .foto,
.wrapper--organisatie-page article .container .foto {
  grid-column: 3 / 11;
  opacity: 0;
  animation: present-yourself 1.5s ease forwards;
  -webkit-animation: present-yourself 1.5s ease forwards;
}

.sub-text {
  padding: var(--component-padding);
}

.sub-text h3 {
  font-family: var(--schreef);
  font-size: var(--step-4);
  font-weight: var(--font-weight-4);
  margin-block: 0;
}

.sub-text p {
  font-family: var(--schreef);
  line-height: var(--body-line-height);
  font-size: var(--step-1);
}

.sub-text a {
  color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
  -moz-text-decoration-color: currentColor;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.sub-text a:is(:hover, :focus) {
  text-underline-offset: 6px;
}

.contact--organisatie {
  background-color: var(--bg-step-6);
  color: var(--text-light);
  padding-block-start: var(--space-lg);
  padding-block-end: var(--space-xl);
  margin-top: var(--space-xxl);
}

.contact--organisatie h2 {
  color: var(--text-light);
  font-size: var(--step-5);
  font-family: var(--schreefloos);
  font-weight: var(--font-weight-4);
  margin-block-start: 0;
}

/** Over ons -- archief */

.wrapper--archief {
  background: var(--bg-step-6);
  padding-block: var(--space-lg);
}

.wrapper--archief h2 {
  grid-column: 1 / -1;
  color: var(--text-light);
  font-family: var(--schreefloos);
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  margin-block-start: 0;
}

.wrapper--archief details {
  grid-column: 1 / -1;
  padding-block-start: var(--space-md);
  margin-block-end: var(--space-md);
}

.wrapper--archief details:not(:first-of-type) {
  border-block-start: 1px solid var(--text-light);
}

.wrapper--archief summary {
  font-size: var(--step-4);
  color: var(--text-light);
  font-weight: var(--font-weight-4);
  cursor: pointer;
}

.wrapper--archief summary span {
  font-size: var(--step--1);
  margin-inline-start: var(--space-md);
}

details video {
  max-width: 100%;
  height: auto;
  margin-block: var(--space-md);
}

.wrapper--archief summary {
  display: flex;
  align-items: baseline;
}

.wrapper--archief summary::-webkit-details-marker,
.wrapper--archief summary::marker {
  display: none;
}

.wrapper--archief details h3 {
  font-size: var(--step-2);
  font-weight: var(--font-weight-4);
  color: var(--text-light);
}

.wrapper--archief summary::after {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(../img/down-arrow-thin-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-inline-start: auto;
}

.wrapper--archief details[open] summary::after {
  content: "";
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

/** Contact */

.contact-info {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  border-block-start: 1px solid var(--color-contrast-high);
  margin-block-end: var(--space-lg);
}

.contact-info h2 {
  display: block;
  width: 100%;
  font-size: var(--step-3);
  font-family: var(--schreefloos);
  margin-block-end: 0;
}

.contact-info > div,
.contact-info .fui-row {
  flex: 1 2 45%;
  flex-direction: column;
}

.contact-info div :is(h3, p) {
  font-family: var(--schreefloos);
  margin-block: 0;
  line-height: var(--body-line-height);
  font-size: var(--step-1);
}

.contact-info h3 {
  font-weight: var(--font-weight-7);
}

/** FOOTER */

footer {
  position: sticky;
  height: 90vh;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-step-7);
  color: var(--text-light);
  line-height: var(--body-line-height);
  font-family: var(--schreefloos);
  font-size: var(--step--2);
}

.stay-up-to-date {
  background-color: var(--bg-step-4);
  color: var(--color-contrast-high);
  padding: var(--component-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stay-up-to-date h4 {
  grid-row: 1;
  grid-column: 1 / -1;
  font-size: var(--step-3);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
  margin: 0;
  color: var(--color-contrast-higher);
  line-height: var(--body-line-height);
}

input,
#mc_embed_signup .mc-field-group input,
#mc-field-group {
  width: 100%;
  border: none;
  padding: var(--component-padding);
  color: var(--color-contrast-medium);
  font-family: var(--schreefloos);
  font-size: var(--bg-step--1);
  height: 100%;
}

.mc-field-group input:focus,
.mc-field-group input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

#mce-success-response {
  background-color: white;
  height: 100%;
  display: inline-flex;
  align-items: center;
  font-size: var(--step--1);
  font-family: var(--schreefloos);
  color: var(--bg-step-6);
}

button {
  width: 100%;
  max-width: 100%;
  border: none;
  padding: var(--component-padding);
  text-align: left;
  background-color: var(--text-light);
  color: var(--color-contrast-medium);
}

.footer--top {
  /* z-index: -1; */
  background: var(--color-primary);
}

.footer--top > .container {
  align-items: center;
}

.container.meer-info {
  display: none;
}

.container.meer-info.show {
  display: grid;
}

.rotate {
  transform: rotate(180deg);
}

.stay-up-to-date p {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-block-end: 0;
}

/* .stay-up-to-date input {
  grid-row: 3;
  grid-column: 1 / -1;
  background-color: var(--bg-step-4);
  border-block-end: 1px var(--bg-step-6) solid;
  padding: 0;
  margin-block-start: var(--space-md);
  padding-block-end: .5rem;
} */

.stay-up-to-date #mc_embed_shell {
  grid-row: 3;
  grid-column: 1 / -1;
  background-color: var(--bg-step-4);
  padding: 0;
  padding-block-end: .5rem;
  padding-block-start: .5rem;
}

.stay-up-to-date #mce-success-response {
  background-color: white;
  height: 100%;
  display: inline-flex;
  align-items: center;
  font-size: var(--step--2);
  font-family: var(--schreefloos);
  color: var(--bg-step-6);
}

.contact-informatie {
  background-color: var(--color-primary);
  color: var(--text-light);
  padding: var(--component-padding);
}

.logo-footer {
  grid-row: 1;
  grid-column: 1 / 6;
  width: 50%;
}

.contact {
  grid-row: 1;
  grid-column: 6 / -1;
}

.adres {
  grid-row: 2;
  grid-column: 6 / -1;
}

.container.meer-info.show > .logo_footer {
  display: none;
}

.footer--top > .container > p {
  grid-column: 2 / span 9;
  text-align: center;
}

.footer--top > .container > svg:first-of-type {
  grid-column: 1;
  margin: .5rem;
  height: auto;
  width: 4rem;
}

.footer--top > .container > svg {
  grid-column: 11;
  place-self: center end;
  height: auto;
  width: 2rem;
  margin-block-end: inherit;
}

.contact,
.adres,
.socials {
  grid-column: 6 / span 6;
  display: flex;
  flex-direction: column;
}

:is(.contact, .socials) p:first-of-type {
  margin-block-start: 0;
}

address {
  font-style: normal;
}

address > p {
  margin-block: 0;
}

.socials {
  grid-row: 2;
  grid-column: 1 / 6;
}

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

footer a {
  color: var(--text-light);
  text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

footer a:is(:hover, :focus) {
  text-decoration-color: currentColor;
  -moz-text-decoration-color: currentColor;
  text-underline-offset: 2px;
}

#mc_embed_signup_scroll {
  display: flex;
  flex-direction: row;
}

.mc-field-group {
  position: relative;
  display: flex;
  flex: 3;
  flex-direction: column;
}

#mc-embedded-subscribe {
  display: flex;
  flex: 1;
  padding: var(--component-padding);
  font-family: var(--schreefloos);
  background-color: var(--bg-step-3);
  color: var(--bg-step-7);
}

#mc-embedded-subscribe:hover {
  background-color: var(--bg-step-7);
  color: var(--bg-step-1);
}

#mc_embed_signup div.mce_inline_error {
  position: absolute;
  right: 0;
  margin: 0 !important;
  font-family: var(--schreefloos) !important;
  font-size: var(--step--2) !important;
  display: flex;
  align-items: center;
  background-color: var(--color-error-dark) !important;
}

#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
  outline: 2px solid var(--color-error-dark);
}

input {
  width: 100%;
  border: none;
  padding: var(--component-padding);
  color: var(--color-contrast-medium);
}

.center-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / -1;
}

.footer--bottom {
  background-color: var(--bg-step-7);
}

.footer--bottom > .container > .center-footer > p {
  grid-row: 1;
  grid-column: 1 / -1;
  align-self: flex-start;
  flex: 1;
}

.footer--bottom > .container > p {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: small;
}

.sponsoren {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
  justify-items: center;
}

.sponsoren > img {
  width: 150px;
  height: auto;
}

.footer--top svg {
  height: 100px;
  width: 100px;
  margin-block-end: var(--space-md);
}

.festival-footer {
  background-color: var(--color-bg);
  color: var(--color-primary);
  padding: var(--component-padding);
}

.festival-footer svg {
  fill: var(--color-primary);
}

.festival-footer a {
  color: var(--color-primary);
}

@media screen and (min-width: 768px) {
  footer {
    height: auto;
  }

  .container.meer-info.show > .logo_footer {
    display: grid;
  }

  .stay-up-to-date-info {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }

  .stay-up-to-date-homepage figure {
    flex: 1;
    height: inherit;
    min-height: 100%;
    border-block-end: none;
    margin-block-end: 0;
  }

  input,
  button,
  #mc_embed_shell {
    margin-block-start: auto;
  }

  .container.mobile {
    display: none;
  }

  .container.meer-info {
    display: grid;
  }

  .logo_footer {
    width: 9rem;
    height: auto;
    aspect-ratio: 1;
    place-self: center start;
  }

  .stay-up-to-date {
    display: grid;
  }

  .stay-up-to-date p {
    grid-row: 2;
    grid-column: 1 / 5;
  }

  .stay-up-to-date input {
    grid-row: 2;
    grid-column: 6 / -1;
    place-self: end;
  }

  .stay-up-to-date #mc_embed_shell  {
    grid-row: 2;
    grid-column: 6 / -1;
  }

  .logo-footer {
    grid-row: 1;
    grid-column: 1 / span 2;
    align-self: center;
  }

  .contact {
    grid-row: 1;
    grid-column: 3 / span 3;
  }

  .adres {
    grid-row: 1;
    grid-column: 6 / span 3;
  }

  .socials {
    grid-row: 1;
    grid-column: 11 / span 2;
  }

  .center-footer {
    flex-direction: row;
    align-items: flex-start;
  }

  .sponsoren {
    gap: 3rem;
    grid-row: 1;
    margin-top: 1em;
    grid-column: 3 / -1;
    flex: 1;
    align-items: center;
    justify-items: center;
    padding-bottom: 0;
  }

  .sponsoren > img {
    width: 80%;
  }
}

@media screen and (min-width: 1200px) {
  .sponsoren-blok > img {
    width: 100%;
  }
}

/** Zoeken en zoekresultaten */

.wrapper--zoeken {
  background: var(--bg-step-1);
  padding-block-start: calc(var(--space-xxxl) * 1.2);
  padding-block-end: var(--space-xl);
  min-height: 100svh;
}

.wrapper--zoeken h1 {
  grid-column: 1 / -1;
  font-size: var(--step-5);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.wrapper--zoeken h2 {
  grid-column: 1 / -1;
  font-size: var(--step-3);
  font-weight: var(--font-weight-4);
  font-family: var(--schreefloos);
}

.zoekformulier {
  grid-column: 1 /-1;

  display: flex;
  background-color: var(--color-primary);
  padding: var(--space-md);
}

.zoekformulier span {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-block-end: 1px solid var(--text-light);
  row-gap: var(--space-md);
}

.zoekformulier :is(input[type="search"]) {
  font-family: var(--schreefloos);
  color: white;
  font-size: var(--step-1);
  border: 1px solid currentColor;
  height: auto;
}

@media screen and (min-width: 670px) {
  .zoekformulier :is(input[type="search"]) {
    border: none;
  }
}

.zoekformulier input[type="search"] {
  flex: 1 2 80%;
}

.zoekformulier button {
  flex: 1 2 8%;
  align-self: flex-end;
  text-align: center;
  color: var(--text-darker);
  font-size: var(--step-1);
  font-family: var(--schreefloos);
  transition: all .2s var(--ease-3);
  -webkit-transition: all .2s var(--ease-3);
  -moz-transition: all .2s var(--ease-3);
  -ms-transition: all .2s var(--ease-3);
  -o-transition: all .2s var(--ease-3);
}

.zoekformulier button:is(:hover, :focus) {
  cursor: pointer;
  color: var(--color-primary);
}

.zoekformulier :is(input) {
  background-color: transparent;
}

.zoekformulier ::placeholder {
  color: var(--text-light);
  opacity: 1;
  font-size: var(--step-1);
  font-family: var(--schreefloos-italic);
}

.zoekformulier :-ms-input-placeholder {
  color: var(--text-light);
}

.zoekformulier ::-ms-input-placeholder {
  color: var(--text-light);
}

.resultaten--overview {
  margin-block-start: var(--space-xl);
  opacity: 0;
  animation: present-yourself 1.5s ease forwards;
  -webkit-animation: present-yourself 1.5s ease forwards;
}

.resultaten {
  grid-column: 1 / -1;

  list-style: none;
  margin: 0;
  padding: 0;
}

.resultaten li {
  padding-block: var(--space-lg);
}

.resultaten li:not(:last-of-type) {
  border-block-end: 1px solid var(--color-contrast-medium);
}

.resultaten a {
  font-family: var(--schreef);
  font-size: var(--step-4);
  line-height: var(--heading-line-height);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  color: var(--text-darker);
}

dialog {
  /* position: relative; */
  inset: 0;
  block-size: 100svh;
  outline: none;
  padding: 0;
  border: 0;
}

.remove-scrolling { 
  height: 100%; 
  overflow: hidden; 
} 

dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

dialog button {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  max-inline-size: fit-content;
  z-index: 100;
  color: var(--text-light);
  background: transparent;
  font-family: var(--schreefloos-semibold);
}

dialog figcaption {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  font-family: var(--schreefloos-italic);
  font-size: var(--step--1);
  background-blend-mode: exclusion;
  background-color: var(--color-primary);
  padding: var(--space-xs);
  color: var(--text-light);
}

/** form formie plugin css */

.fui-i {
  /* Inherit from the site body, like the rest of the site */
  --fui-font: var(--schreefloos);
  --fui-font-size: var(--step-1);

  /* // Form Titles */
  .fui-title {
    font-size: var(--step-3);
    margin-bottom: var(--space-sm);
  }

  .fui-label, 
  .fui-checkbox-label {
    font-family: var(--schreefloos);
    font-size: var(--step-1);
    color: var(--bg-step-7);
  } 

  .fui-btn {
    font-size: var(--step-1);
    padding: 0.375rem 0.75rem;
    border-radius: 0;
    border: none;
    width: 50%;
    }

  .fui-form-container {
    margin-top: var(--space-lg);
   }
    
  .fui-input,
  .fui-select {
     font-size: var(--step-1);
     font-family: var(--schreefloos);
     border-radius: 0;
   }
    
  .fui-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary);
  }
}

.fui-submit {
  font-size: var(--step-1);
--fui-submit-btn-bg-color: var(--color-primary);
--fui-submit-btn-border-color: var(--bg-step-0);
--fui-submit-btn-bg-color-hover: var(--color-primary);
--fui-submit-btn-border-color-hover: var(--bg-step-0);
--fui-submit-btn-box-shadow-focus: 0 0 0 0.25rem var(--color-primary);
}

.fui-type-radio-buttons .fui-legend,
.fui-fieldset .fui-legend {
  font-size: var(--step-1);
  color: var(--bg-step-7);
}


.fui-fieldset .fui-checkbox label,
.fui-fieldset .fui-radio label {
  font-size: var(--text-base-size);
}

.fui-type-html {
  color: var(--bg-step-7);
}