@property --styl-value {
  syntax: '<number>';
  initial-value: 150;
  inherits: false;
}

/* --- Fonts --- */

@font-face {
  font-family: 'OPS documenta grotesk';
  src: url('../fonts/OPSdocumenta-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'OPS documenta grotesk';
  src: url('../fonts/OPSdocumenta-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'OPS documenta grotesk';
  src: url('../fonts/OPSdocumenta-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'OPS documenta grotesk';
  src: url('../fonts/OPSdocumenta-BoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'OPS documenta geometric';
  src: url('../fonts/OPSdocArchiv-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'OPS documenta geometric';
  src: url('../fonts/OPSdocArchiv-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'OPS documenta geometric';
  src: url('../fonts/OPSdocArchiv-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'OPS documenta geometric';
  src: url('../fonts/OPSdocArchiv-BoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'OPS documenta humanist';
  src: url('../fonts/OPSdocFriends-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'OPS documenta humanist';
  src: url('../fonts/OPSdocFriends-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'OPS documenta humanist';
  src: url('../fonts/OPSdocFriends-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'OPS documenta humanist';
  src: url('../fonts/OPSdocFriends-BoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'OPS documenta variable';
  src: url('../fonts/OPSdocumentaVariableVF.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "STYL" 400;
}


/* --- Baseline --- */

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;

  /* transitions */
  --transition-time: 0.2s;

  /* spacing */
  --main-padding: 2rem;

  --text-width: 75ch;
  --content-width: 1728px;

  /* colors */
  --black: #101010;
  --dark-grey: #494949;
  --mid-grey: #888888;
  --line-grey: #BEBEBE;
  --mini-grey: #E5E5E5;
  --tiny-grey: #F5F5F5;
  --white: #FFFFFF;


  --light-bg: var(--white);
  --light-color: var(--black);

  --dark-bg: rgb(13, 17, 23);
  --dark-color: rgb(240, 246, 252);

  --icon-stroke: currentColor;
  --icon-fill: currentColor;

  --notification-bar-height: 0px;

}

/* --- Page Layout --- */
.page-layout > *, .full-width > * {
  grid-column: content;
}
.page-layout, .full-width {--minimum-content-padding: var(--main-padding);

/** TRACK WIDTHS **/--full-max-width: 1fr;--popout-max-width: 1920px;--content-max-width: var(--content-width);--inset-content-max-width: 1440px;

/** TRACK SIZES **/--full: minmax( var(--minimum-content-padding), 1fr );--popout: minmax( 0, calc( ( var(--popout-max-width) - var(--content-max-width)) * 0.5 ) );--content: minmax( 0, calc( ( var(--content-max-width) - var(--inset-content-max-width)) * 0.5 ) );--inset-content: min( var(--inset-content-max-width), 100% - var(--minimum-content-padding) * 2 );display: grid;gap: var(--main-padding) 0;grid-template-columns: 
  [full-start]
  var(--full)
    [popout-start]
    var(--popout)
      [content-start]
      var(--content)
        [inset-content-start]
        var(--inset-content)
        [inset-content-end]
      var(--content)
      [content-end]
    var(--popout)
    [popout-end]
  var(--full)
  [full-end];}

/** CLASSES **/
.full { grid-column: full; }
.full-start { grid-column-start: full-start; }
.full-end { grid-column-end: full-end; }

.popout { grid-column: popout; }
.popout-start { grid-column-start: popout-start; }
.popout-end { grid-column-end: popout-end; }

.content { grid-column: content; }
.content-start { grid-column-start: content-start; }
.content-end { grid-column-end: content-end; }

.inset-content { grid-column: inset-content; }
.inset-content-start { grid-column-start: inset-content-start; }
.inset-content-end { grid-column-end: inset-content-end; }

.full-width {grid-column: full;overflow: clip;}
.full-content, .full-content-nopad { grid-column: full; }
.full-content { padding-inline: var(--minimum-content-padding); }

/* ---- Global Styles ---- */

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'OPS documenta grotesk', Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* Fallback background-color for browsers that don't support light-dark() */
  background-color: var(--light-bg);
  color: var(--light-color);
  /* Modern browser support with light-dark() */
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.4;
  scroll-behavior: smooth;
}

/* Support for browsers using prefers-color-scheme but not light-dark() */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    background-color: var(--dark-bg);
    color: var(--dark-color);
  }
}

/* Styles for HTML with explicit theme attributes */
html[data-theme="light"] {
  color-scheme: light;
  background-color: var(--light-bg);
  color: var(--light-color);
}

html[data-theme="dark"] {
  color-scheme: dark;
  background-color: var(--dark-bg);
  color: var(--dark-color);
}


body {
  /* max-width: var(--content-width); */
  /* margin: auto; */
}

.h0,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 400;
  line-height: 1.2;
}

.h0 {
  font-size: 7rem;
}

h1,
.h1 {
  font-size: 4rem;
}

h2,
.h2 {
  font-size: 2.6rem;
}

h3,
.h3 {
  font-size: 1.8rem;
  font-weight: 400;
}

h4,
.h4 {
  font-size: 1.25rem;
}

article h4,
article .h4 {
  font-weight: 600;
}

h5,
.h5 {
  font-size: 1.25rem;
  font-weight:600;
}

h6,
.h6 {
  font-size: 1.25rem;
  /* font-weight:600; */
}


li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
}

main.accessibility :is(strong, b) {color: royalblue;}

p {
  font-size: 1.25rem;
  max-width: 85ch;
}

img,
video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@keyframes fontVariationPulse {
  0% {
    font-variation-settings: "STYL" 100;
  }

  25% {
    font-variation-settings: "STYL" 100;
  }

  35% {
    font-variation-settings: "STYL" 200;
  }

  60% {
    font-variation-settings: "STYL" 200;
  }

  70% {
    font-variation-settings: "STYL" 300;
  }

  90% {
    font-variation-settings: "STYL" 300;
  }

  100% {
    font-variation-settings: "STYL" 399.9;
  }
}

button,
.button,
.tag {
  border-radius: 2.75rem;
  /* Fallback background for browsers that don't support light-dark() */
  background: var(--tiny-grey);
  color: var(--light-color);
  /* Modern browser support with light-dark() */
  background: light-dark(var(--tiny-grey, #F5F5F5), var(--dark-grey));
  color: light-dark(var(--light-color), var(--dark-color));
  display: inline-flex;
  padding: 0.5rem 0.875rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  transition: background-color var(--transition-time) ease-in-out;
  white-space: nowrap;
}

/* Support for browsers using prefers-color-scheme but not light-dark() */
@media (prefers-color-scheme: dark) {
  button:not(.social-media),
  .button:not(.social-media),
  .tag {
    background: var(--dark-grey);
    color: var(--dark-color);
  }
}

button:not(.social-media)[href^="http"]:not([href*="documenta.de"]),
.button:not(.social-media)[href^="http"]:not([href*="documenta.de"]),
a.button:not(.social-media)[href^="http"]:not([href*="documenta.de"]) {
  position: relative;
}

button:not(.social-media)[href^="http"]:not([href*="documenta.de"])::after,
.button:not(.social-media)[href^="http"]:not([href*="documenta.de"])::after,
a.button:not(.social-media)[href^="http"]:not([href*="documenta.de"])::after {
  content: "↗";
}

button.secondary,
.button.secondary {
  background: var(--mini-grey, #F5F5F5);
  color: var(--light-color);
}

button.ternary,
.button.ternary {
  background: var(--dark-grey, #F5F5F5);
}

button.active, .button.active, .tag {
  /* Fallback background for browsers that don't support light-dark() */
  background: var(--dark-bg);
  color: var(--dark-color);
  /* Modern browser support with light-dark() */
  background: light-dark(var(--dark-bg), var(--light-bg));
  color: light-dark(var(--dark-color), var(--light-color));
}

/* Support for browsers using prefers-color-scheme but not light-dark() */
@media (prefers-color-scheme: dark) {
  button.active, .button.active, .tag {
    background: var(--light-bg);
    color: var(--light-color);
  }
}

button.disabled,
.button.disabled {
  color: var(--line-grey, #BEBEBE);
  cursor: not-allowed;
}

.tag {
  cursor: default;
  font-size: 1rem;
  height: unset;
  padding: .25rem 0.7rem;
}


address {
  font-style: normal;
  /* font-size: 1.5rem; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body.header-hidden header.site-header {
  transform: translateY(calc(var(--header-height)*-1));
}

body.header-hidden .sticky.navigation {
  top: var(--admin-bar--height, 0);
}


.column_2_grid iframe {
  aspect-ratio: 16 / 9;
  width: 100% !important;
  border: none;
}

article p a,
#sib-container a,
.press-link a {
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

article ol{
  font-size: 1.25rem;
}

article ol li{
  list-style-type: decimal;
}

/* --- Institution Fonts --- */

.archiv {
  font-family: 'OPS documenta geometric', Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01" 1;
}
.friends {
  font-family: 'OPS documenta humanist', Helvetica, Arial, sans-serif;
}

:is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6) {
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  font-variation-settings: "STYL" 200;
}
.archiv :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
li.archiv {
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  font-variation-settings: "STYL" 100;
}

.halle :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
li.halle {
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  font-variation-settings: "STYL" 150;
}
.fridericianum :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
li.fridericianum {
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  font-variation-settings: "STYL" 250;
}
.friends :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
li.friends {
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  font-variation-settings: "STYL" 300;
}
.institut :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
li.institut {
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  font-variation-settings: "STYL" 350;
}


/* ----- Animations ------  */
/* 
@media (prefers-reduced-motion: no-preference) {
  .documenta :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
  li.documenta {
    --styl-value: 120;
    animation: documenta linear forwards;
  }
  .archiv :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
  li.archiv {
    --styl-value: 180;
    animation: archiv linear forwards;
  }
  .halle :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
  li.halle {
    --styl-value: 230;
    animation: halle linear forwards;
  }
  .fridericianum :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
  li.fridericianum {
    --styl-value: 170;
    animation: fridericianum linear forwards;
  }
  .friends :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
  li.friends {
    --styl-value: 220;
    animation: friends linear forwards;
  }
  .institut :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
  li.institut {
    --styl-value: 270;
    animation: institut linear forwards;
  }

  :is(.archiv, .fridericianum, .institut, .halle, .documenta, .friends) :is(h1, h2, h3, h4, h5, h6):not(article h2, article h3, article h4, article h5, article h6),
  li:is(.archiv, .fridericianum, .institut, .halle, .documenta, .friends) {
    font-variation-settings: "STYL" var(--styl-value);
    animation-timeline: view();
    animation-duration: 1ms;  
    animation-range-start: contain -10%;
    animation-range-end: contain 40%;
  }

  @keyframes archiv {
    to {
      --styl-value: 100;
    }
  }
  @keyframes halle {
    to {
      --styl-value: 150;
    }
  }
  @keyframes documenta {
    to {
      --styl-value: 200;
    }
  }
  @keyframes fridericianum {
    to {
      --styl-value: 250;
    }
  }
  @keyframes friends {
    to {
      --styl-value: 300;
    }
  }
  @keyframes institut {
    to {
      --styl-value: 350;
    }
  }
} */

/* --- Main --- */

div.site-title {
  font-size: 1.5rem;
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  animation: fontVariationPulse 15s infinite normal;
}

/* --- Header --- */

header.site-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 3rem;
  padding: 0.8rem var(--main-padding);
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: var(--admin-bar--height, 0);
  /* Fallback background-color for browsers that don't support light-dark() */
  background-color: var(--light-bg);
  /* Modern browser support with light-dark() */
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  z-index: 12;
  transition: transform var(--transition-time) ease-in-out, box-shadow var(--transition-time) ease-in-out;
}

/* Support for browsers using prefers-color-scheme but not light-dark() */
@media (prefers-color-scheme: dark) {
  header.site-header {
    background-color: var(--dark-bg);
  }
}

body:not(.header-hidden) .header-shadow {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.025);
}

@media (prefers-color-scheme: dark) {
  body:not(.header-hidden) .header-shadow {
    box-shadow: 0px 5px 10px rgba(255, 255, 255, 0.05);
  }
}

main>header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem 0;
}

main.documenta>header {
    justify-content: center;
}

main>header #filter {
  flex-basis: 100%;
}

button.filter::after {
  content: "▼";
  display: inline-block;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  transform: rotate(0deg);
  transition: transform var(--transition-time) ease;
}

button.filter[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.documenta main>header.big {
}

main>header.big :is(h1) {
  /* grid-area: 2 / 1; */
  grid-column-end: span 2;
  align-self: center;
  justify-self: center;
  text-align: center;
  padding: 4rem 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

main>header.big:has(a) h1 {
  padding: 4rem 3rem 6rem;
}

main {
  padding: var(--main-padding) 0;
  display: flex;
  flex-direction: column;
  /* gap: var(--main-padding); */
  /* max-width: var(--content-width); */
  margin-top: var(--admin-bar--height, 0);
}

main:has(aside.related) {
  padding-bottom: 0;
}

/* Disable all button styling for the main menu burger button */

nav.main-menu button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

nav.main-menu button svg {
  width: 1.25rem;
}

/* --- Footer --- */

footer {
  padding: 1rem 0;
  background-color: var(--dark-bg);
  background-color: light-dark(var(--dark-bg), #13191b);
  color: var(--dark-color);
}
footer .wrapper {
  display: flex !important;
  justify-content: space-between;
}

footer section.main-footer {
  display: grid;
  gap: var(--main-padding);
  grid-template-columns: repeat(3, 1fr);
}

footer section.main-footer section:is(.site-footer, .bottom-section) {
  display: contents;
}

aside.animated-d-logo {
  font-size: min(30rem,22vw);
  line-height: 0.82;
  font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
  animation: fontVariationPulse 15s infinite normal;
  height: 100%;
  overflow: hidden;
  width: 15.7vw;
}

footer section.contact, footer section.site-footer nav>*, footer section.accessibility {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

footer section.contact {}

footer section.bottom-section p {
  color: var(--mid-grey, #888);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  align-self: end;
}

footer :is(button, .button) {
  background-color: var(--dark-grey);
  color: var(--white);
}

ul.social-media {
  display: flex;
  gap: 1rem;
}

article .column_2_grid, section.director-section {
  grid-template-columns: 1fr 1fr;
  display: grid;
  gap: 2rem;
}

.director-text li {
  break-inside: avoid;
}

article :is(h1, h2, h3, h4, h5, h6, p, ul, ol) + :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
  margin-top: 1.25rem;
}

article section:is(.related, .artists) :is(h1, h2, h3, h4, h5, h6, p, ul, ol) + :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
  margin-top: 0;
}

article p + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: calc(var(--main-padding)*1.5);
}

article :is(h4, h5, h6) + p{
  margin-top: 0;
}

article .sticky.r .column:nth-child(even)>* {
  position: sticky;
  top: calc(var(--main-padding) + var(--header-height) + var(--admin-bar--height, 0px) + var(--sticky-nav-height, 0px));
  transition: top var(--transition-time) ease-in-out;
}

body.header-hidden article .sticky.r .column:nth-child(even)>* {
    top: calc(var(--main-padding) + var(--admin-bar--height, 0px) + var(--sticky-nav-height, 0px));
}

article .sticky.l .column:nth-child(odd)>* {
  position: sticky;
  top: calc(var(--main-padding) + var(--header-height) + var(--admin-bar--height, 0px) + var(--sticky-nav-height, 0px));
  transition: top var(--transition-time) ease-in-out;
}

body.header-hidden article .sticky.l .column:nth-child(odd)>* {
    top: calc(var(--main-padding) + var(--admin-bar--height, 0px) + var(--sticky-nav-height, 0px));
}

nav.main-menu {
  position: relative;
}

nav ul#main-menu {
  position: absolute;
  left: calc(-1*var(--main-padding));
  width: 100vw;
  /* max-width: var(--content-width); */
  display: grid;
  grid-template-columns: [start] repeat(4, 1fr) [end];
  gap: var(--main-padding);
  padding: var(--main-padding);
  background-color: var(--light-bg);
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  z-index: 510;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.025);
}

nav ul#main-menu ul.nav-group {
  font-size: 1.875rem;
  display: flex;
  flex-direction: column;
  /* gap: 0.25rem; */
}

nav ul#main-menu ul.nav-group h3 {
  color: var(--mid-grey, #888);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

ul.social-media .social-media {
  width: 2rem;
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  box-sizing: border-box;
}

a.back-link {
  justify-self: left;
  /* align-self: center; */
  /* font-size: .875rem; */
  gap: 0.5rem;
  display: flex;
}

a.back-link svg {
    width: 0.4rem;
    margin-bottom: 0px;
}

.article-header .easy-read-link {
  justify-self: right;
}

article section.article-info {
  display: flex;
  gap: .5rem 1rem;
}

article .column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  grid-column: span var(--span);
}

main:is(.page.default, .article) article {
  padding-bottom: 4.5rem;
  /* display: flex; */
  /* flex-direction: column; */
  gap: calc(var(--main-padding) * 3) 0;
  /* max-width: var(--content-width); */
  /* margin: auto; */
}

main.article article {
    display: flex;
    flex-direction: column;
}

.related, section.artists {
  padding: var(--main-padding) 0;
}
article + .related {
  margin-top: calc(var(--main-padding) * 3);
}

aside.related {
  background-color: light-dark(var(--tiny-grey), var(--dark-grey));
}

.related nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.related header, header.artists-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  min-height: 2.75rem;
  /* width: calc(100% - 6.5rem); */
}

swiper-container:not(.filter, .artists) {
  margin-left: calc((var(--main-padding) + 1rem)*-1);
  width: calc(100% + (var(--main-padding) + 1rem) * 2);
  padding: 0 var(--main-padding);
  /* overflow: hidden; */
  /* gap: 1rem; */
}

swiper-container.overflowing::part(container) {
  overflow: visible;
}

swiper-container:not(.filter, .artists) swiper-slide {
  width: min(30%,20rem);
  padding: 1rem;
}

swiper-container.related-articles swiper-slide {
    width: min(36%,26rem);
}

swiper-container.toggle-navigation swiper-slide {
    width: auto;
}

swiper-container.artists swiper-slide {
    width: auto;
}

.swiper.filter swiper-slide {
  width: auto;
}

.slideshow.navigation.prev {
  /* transform: rotate(180deg); */
}

.slideshow.navigation{
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.75rem;
  vertical-align: bottom;
}

.slideshow.navigation svg {width: 100%;}
.slideshow.navigation.swiper-button-disabled{
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}



a.overview {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

a.documenta-exhibition.overview {
    gap: 0.25rem;
}

a.overview img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  aspect-ratio: 4/5;
}

a.overview.subrent img {
    aspect-ratio: unset;
}

a.overview:is(.exhibition, .event, .documenta-exhibition) img {
  aspect-ratio: 1/1.414;
}
a.overview.article img {
  aspect-ratio: 3/2;
}

a:is(.article, .exhibition).overview.landscape img {
  aspect-ratio: 3/2;
}


a.overview:is(.documenta-exhibition, .exhibition) img {
    object-fit: contain;
    object-position: top right !important;
}
a.article.overview.portrait img {
  /* height: 100%; */
  /* width: auto; */
  /* height: 60vh; */
  aspect-ratio: 2 / 3;
}

a.overview.contain img {
  object-fit: contain;
  object-position: bottom left;
}

a.overview.documenta:not(.publication) {
  /* gap: 0; */
}
a.overview.documenta .documenta-year {
  /* padding-bottom: 1rem; */
}





ul.language-switcher {
  display: flex;
  text-transform: uppercase;
  gap: 1rem;
  align-items: center;
}

ul#main-menu ul.accessibility-menu, 
ul#main-menu section.accessibility {
  display: flex;
  gap: var(--main-padding);
}

ul.accessibility-menu svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: -0.45rem;
}

.block.image figure, figure.director-image {
  aspect-ratio: var(--aspect-ratio);
  max-height: 75vh;
  width: auto;
  max-width: 100%;
}

.block.image img,
.director-section img {
  max-height: 75vh;
  object-fit: contain;
  object-position: left;
}

nav.filter {
  display: contents;
}

ul:is(
  .news-list,
  .events-list,
  .exhibition-list,
  .retrospective-list,
  .publication-list
) {
  display: grid;
  grid-template-columns: [start] repeat(auto-fill, minmax(300px, 1fr)) [end];
  gap: 3rem 0;
  grid-auto-flow: dense;
  margin-left: -1rem;
  width: calc(100% + 2rem);
}

ul:is(.news-list, .events-list, .exhibition-list, .retrospective-list, .jobs-list, .publication-list) > li {
  padding: 1rem;
  transition: background-color 0.1s ease-in-out;
}
ul:is(.news-list, .events-list, .exhibition-list, .retrospective-list, .jobs-list, .publication-list) > li {
  padding: 1rem;
}

@media screen and (min-width: 1025px) {
  ul:is(.news-list, .events-list, .exhibition-list, .retrospective-list, .jobs-list, .publication-list) > li:not(.documenta-title):hover,
  swiper-container:not(.filter, .artists) swiper-slide:hover,
  .block.bigbanner a:hover {
    background-color: light-dark(var(--tiny-grey), var(--dark-grey));
  }
}

ul.retrospective-list 
 li.documenta-title {
    padding-bottom: 0;
    margin-bottom: -0.75rem;
}

li.documenta-title {
  grid-column: start / end;
}


ul.exhibition-list {
  grid-template-columns: [start] 1fr [end];
}

ul.news-list {
  grid-template-columns: [start] repeat(auto-fill, minmax(400px, 1fr)) [end];
}

ul.news-list li.featured {
  grid-column: start / end;
}

ul.news-list li.featured a,
a.overview.exhibition {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--main-padding);
}

ul.news-list li.featured a.landscape,
a.overview.exhibition.landscape {
  grid-template-columns: 1fr 1fr;
}
ul.news-list li.featured a:has(img)
a.overview.exhibition:has(img) {
  aspect-ratio: 3/1;
}

ul.news-list .featured-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

ul.news-list .featured-info *:last-child {
  /* margin-top: auto; */
}

ul.news-list .featured img {
    /* height: 100%; */
    /* width: auto; */
    /* max-width: calc(50vw - 3rem); */
    /* max-height: unset; */
    /* aspect-ratio: 3 / 2; */
}

ul.events-list {
  scroll-margin-top: var(--events-nav-height, 0);
}

ul.pagination {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 2rem 0;
}
ul.pagination svg{
  width: 1rem;
}

section.event-info  {
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

section.event-info h2.date-display{
    margin: 0;
}

.exhibition-info h4 {
    padding-top: 1rem;
}

.sticky.navigation {
    position: sticky;
    top: calc(var(--header-height) + var(--admin-bar--height, 0px));
    width: 100%;
    backdrop-filter: blur(15px);
    /* Fallback for browsers not supporting light-dark() */
    background-color: rgba(255, 255, 255, 0.5);
    /* Modern browser support with light-dark() */
    background-color: light-dark(rgba(255, 255, 255, 0.5), rgba(13, 17, 23, 0.5));
    z-index: 10;
    margin-left: calc(var(--main-padding)*-1);
    width: calc(100% + var(--main-padding)*2);
    padding: 1rem var(--main-padding);
    display: flex;
    transition: top var(--transition-time) ease-in-out;
    justify-content: center;
}

/* Support for browsers using prefers-color-scheme but not light-dark() */
@media (prefers-color-scheme: dark) {
  .sticky.navigation {
    background-color: rgba(13, 17, 23, 0.5);
  }
}

article.documenta-content .sticky.navigation {
    /* margin-bottom: -4rem; */
    margin-top: 4rem;
}

main.documenta article > * {
    scroll-margin-top: calc(var(--sticky-nav-height, 76px) + var(--header-height));
}
.header-hidden main.documenta article > * {
    scroll-margin-top: var(--sticky-nav-height, 76px);
}


nav.view-navigation {
    position: absolute;
    gap: 0.5rem;
    right: 2rem;
    top: 1rem;
    display: flex;
}

header.exhibitions-header nav.view-navigation {
    position: inherit;
}

.sticky.navigation ul.toggle-navigation {
    display: flex;
    border-radius: 2.75rem;
    /* Fallback background for browsers that don't support light-dark() */
    background: var(--tiny-grey);
    /* Modern browser support with light-dark() */
    background: light-dark(var(--tiny-grey, #F5F5F5), var(--dark-grey));
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    border: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    gap: 0;
    max-width: 100%;
}

/* Support for browsers using prefers-color-scheme but not light-dark() */
@media (prefers-color-scheme: dark) {
  .sticky.navigation ul.toggle-navigation {
    background: var(--dark-grey);
  }
}

nav.month.navigation {
    width: 100%;
    display: flex;
    justify-content: center;
}

.exhibition-info {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
    /* max-width: 75%; */
}
main>header.big h1.documenta-title {
  padding: var(--main-padding) 0;
}

figure.poster {
    grid-column: start / end;
    align-self: center;
    justify-self: center;
}

figure.poster img {
    max-height: 75vh;
    object-fit: contain;
    object-position: left;
}

.block.overview {
    column-count: 2;
}

.block.overview dt {
    font-weight: 600;
}
.block.overview dl div {
    break-inside: avoid;
}
.block.overview dl div + div {
    margin-top: 1rem;
}
.block.overview dd p {
    font-size: 1rem;
}


article.documenta-content {
    /* display: flex; */
    /* flex-direction: column; */
    gap: 8rem 0;
}

section.portrait-gallery, .block.portrait-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;  
}

div#gallery-container, div.block.gallery div#gallery-container, section.portrait-gallery ul {
    display: grid;
    grid-template-columns: [start] repeat(auto-fill, minmax(18.5rem, 1fr)) [end];
    gap: var(--main-padding);
}

div:not(.works-in-kassel)#gallery-container {
    align-items: center;
}

section.portrait-gallery ul img {
  object-fit: cover;
  object-position: center;
  aspect-ratio: 3/2;
}

.lg-backdrop {
  /* Fallback for browsers not supporting light-dark() */
  background-color: var(--light-bg);
  /* Modern browser support with light-dark() */
  background-color: light-dark(var(--light-bg), var(--dark-bg));
}

@media (prefers-color-scheme: dark) {
  .lg-backdrop {
    background-color: var(--dark-bg);
  }
}

.slideshow-navigation {
    display: flex;
    gap: 0.5rem;
}

.product-images {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

nav.submenu-container.sticky.navigation {
    /* justify-content: flex-start; */
}

ul.submenu {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

h1.institution-title {
    text-align: center;
    padding: 3rem 0 6.5rem;
}

main.home header.home-header {/* display: block; */overflow: inherit;gap: 0;}

main.home .home-header section.intro {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}


main.home .home-header section.hero {
  position: relative;
  top: 0;
  /* width: calc(100% + (2 * var(--main-padding))); */
  /* aspect-ratio: 16 / 9; */
  /* left: -2rem; */
  /* overflow: clip; */
  height: calc((100vh - var(--header-height) - var(--notification-bar-height) - var(--admin-bar--height, 0px) + clamp(3rem, 24vw, 20rem)));
  margin-bottom: clamp(1rem, 10vw, 7rem);
  /* height: calc(100svh + var(--header-height) + clamp(3rem, 18vw, 22rem)); */
}

main.home .home-header video {
  /* position: absolute; */
  /* top: -2rem; */
  width: 100%;
  /* aspect-ratio: 16/9; */
  /* left: -2rem; */
  height: 100%;
  object-fit: cover;
}
main.home .home-header .logo-animation-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: var(
  --white);
  
  /* Add transition property for smooth color change */
  transition: color 0.1s ease-out; /* Quick transition for smooth interpolation */
  
  /* Default color state */
  --intersection-ratio: 0;
  z-index: 10;
}

main.home .home-header .logo-animation-wrapper.back {
    color: light-dark(var(--light-color), var(--dark-color));
    z-index: -1;
    left: 0rem;
    top: var(--header-height);
    height: calc(100% + var(--header-height) + clamp(3rem, 14vw, 7rem));
    /* aspect-ratio: 16/19; */
    width: 100%;
}
main.home a.logo-animation {
    font-size: clamp(3rem, 15vw, 17rem);
    font-family: 'OPS documenta variable', Helvetica, Arial, sans-serif;
    animation: fontVariationPulse 12s infinite normal;
    position: sticky;
    animation-delay: -1s;
    top: calc(48vh - var(--header-height));
    text-align: center;
    line-height: 0.77;
    /* transform: translateY(0.3vw); */
    display: block;
}

main.home .home-header .logo-animation-wrapper.transitioning {
  /* Static fallback color */
  color: var(--white);
}

@supports (color: color-mix(in srgb, white, black)) {
  main.home .home-header .logo-animation-wrapper.transitioning {
    /* Dynamic mixed color based on intersection ratio */
    color: color-mix(in srgb, 
      var(--white) calc((1 - var(--intersection-ratio)) * 100%), 
      light-dark(var(--light-color), var(--dark-color)) calc(var(--intersection-ratio) * 100%)
    );
  }
}

main.home .home-header .logo-animation-wrapper.main-color {
  color: light-dark(var(--light-color), var(--dark-color));
}

main.home .home-header .logo-animation-wrapper.white {
  color: var(--white);
}

.video-bottom-marker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

section#notification {
    background-color: var(--tiny-grey);
    top: var(--admin-bar--height, 0);
    height: var(
    --header-height);
    position: relative;
    z-index: 10;
}

section#notification .accessibility-menu {
    color: var(--black);
}

section.notification-bar nav.accessibility-menu ul {
    display: flex;
    gap: var(--main-padding);
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: row;
}

main.home {
    gap: 3rem 0;
    padding-top: 0;
}

.block.bigbanner a {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    width: calc(100% + var(--main-padding));
    margin-left: -1rem;
}

section.main-banner {
  display: grid;
  grid-template-areas:
    "stack";
  aspect-ratio: 3 / 1;
  /* overflow: hidden; */
  width: 100%;
}

section.main-banner > * {
  grid-area: stack;
}

section.main-banner div.background-image img {aspect-ratio: 3/1;/* max-height: 40vh; */}

.block.bigbanner .logo {
    padding: 1.5rem;
}

.block.bigbanner .logo.image {
    width: 33%;
}
.block.bigbanner .logo.image.large {
    width: 50%;
}
.block.bigbanner .logo.image.small {
    width: 25%;
}

section.main-banner img {
    height: 100%;
    object-fit: cover;
}

main.works-in-kassel .works-description {
    column-count: 2;
    column-gap: var(--main-padding);
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 0.1s ease, -webkit-backdrop-filter 0.1s ease;
    background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25));
}

.menu-overlay-active {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.video-toggle-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: var(--white);
    vertical-align: bottom;
}

article.visit-content,
ul.rent-list {
    display: grid;
    grid-template-columns: [start] repeat(auto-fill, minmax(500px, 1fr)) [end];
    gap: 2rem;
}

.block-type-heading {
    grid-column: start / end;
}

a.rent-item figcaption {
  font-size: 1.5rem;
}

article.rent-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--main-padding);
}

address a {
    /* display: block; */
}

ul.jobs-list {
    display: grid;
    grid-template-columns: [start] repeat(auto-fill, minmax(700px, 1fr)) [end];
    gap: 1rem;
}

article.job-article {
    max-width: 85ch;
    margin: auto;
    display: block;
}

section.contact-content {
    display: grid;
    grid-template-columns: [start] repeat(auto-fill, minmax(600px, 1fr)) [end];
    gap: var(--main-padding);
}

main.contact p {
  font-size: 1rem;
}

main.contact section.general {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

address a.button {
    margin-top: 1rem;
}

.artists .letter {
    text-transform: capitalize;
    font-size: 1.25rem;
    font-weight: 600;
}

swiper-slide.artists {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.25rem;
}

header.artists-header {}

/* section#retrospektive-artists {
    display: flex;
    flex-direction: column;
    gap: 1rem;
} */

main.documenta section.concept {
    display: flex;
    flex-direction: column;
    gap: 6rem var(--main-padding);
}

.notification-bar .accessibility-menu {
  height: 100%;
}

.block.image figure.small {
  width: 33%;
}

.block.image figure.medium {
  width: 50%;
}

.lg-prev, .lg-next {
    top: 50%;
    position: absolute;
    transform: rotate(180deg);
    margin-top: -2rem;
    left: var(--main-padding);
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.75rem;
    vertical-align: bottom;
    z-index: 1080;
}

.lg-next {
    right: var(--main-padding);
    /* transform: rotate(0deg); */
    left: unset;
}

.lg-toolbar {display: flex;flex-direction: row-reverse;padding: 1rem var(--main-padding);}

.lg-img-wrap {
    padding: 0 6rem 4rem;
}

.lg-counter {position: absolute;bottom: 1rem;left: var(--main-padding);white-space: nowrap;}

.lg-sub-html {
    position: absolute;
    bottom: 1rem;
    text-align: center;
    width: 100%;
    padding: 0 2rem 0 5.5rem;
}

.lg-sub-html, .lg-counter {
  padding: 0;
  position: initial;
  /* width: auto; */
}

aside.related button {
    background-color: var(--mini-grey);
}

.lg-close {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.75rem;
    /* vertical-align: bottom; */
}

.lg-close::after {
    content: "✕";
    font-size: 1.5rem;
}

#sib-container input:-ms-input-placeholder {
  text-align: left;
  color: var(--line-grey);
}

#sib-container input::placeholder {
  text-align: left;
  color: var(--line-grey);
}

figcaption {
    padding-top: .25rem;
    font-size: .75rem;
}

:is(.block.text, article.job-article, article.institution-content) :is(ul:not(.buttons), ol) {
    padding-left: 2rem;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
    /* padding: 1rem; */
}

:is(.block.text, main.accessibility, article.job-article, article.institution-content) ul:not(.buttons) li {
    margin-bottom: .5rem;
    list-style-type: disc;
}

main.accessibility{
  gap: 6rem 0;
}

main.accessibility .subpages-list {
  padding: var(--main-padding);
}
main.accessibility article .block.image {
  justify-content: flex-start;
}

main.accessibility,
main.accessibility p {
    font-size: 1.5rem;
    line-height: 1.5;
}

main.accessibility h3 {
    font-size: 2.25rem;
}

main.accessibility h3 {
    font-size: 2.25rem;
}

main.accessibility article {
  gap: var(--main-padding);
  display: flex;
  flex-direction: column;
}

main.accessibility figcaption {
    font-size: 0.75rem;
}

main.accessibility .block.image img {
    max-height: 50vh;
}
main.accessibility a {
    text-decoration: underline;
}

main.accessibility a.active {
    font-weight: 600;
}

.director-list ul {
    padding: var(--main-padding) 0;
    column-count: 2;
    column-gap: 2rem;
    font-size: 1rem;
}

.director-list ul li {
    break-inside: avoid;
}

.director-list ul li + li {
    margin-top: 1rem;
}

.director-image {
    position: sticky;
    top: calc(var(--main-padding) + var(--header-height) + var(--admin-bar--height, 0px) + var(--sticky-nav-height, 0px));
}

.video-toggle-btn {
  top: 1rem;
  right: calc(var(--main-padding) - 5px);
  z-index: 11;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: block;
  align-items: center;
  justify-content: center;
  position: absolute;
  padding-bottom: 0.7rem;
  padding-left: 0.8rem;
}

.language-switcher a.active {
    font-weight: 600;
}

ul.publication-list {}

figure.has-tags {
    position: relative;
}

figure.has-tags ul.tags-list {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}



@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Hide the email check field */
#sib-container .input--hidden {
  display: none;
}

/* Form Layout for larger screens */
@media (min-width: 768px) {
  
  #sib-container .form__label-row {
    display: contents;
  }
  
}

section.team-section {
  display: flex;
  flex-direction: column;
  gap: var(--main-padding);
}

section.team-section ul.contact-list {
  columns: 5;
  column-gap: var(--main-padding);
}

ul.contact-list li + li {
  margin-top: 1rem;
}

li.contact-person {
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.contact-position {
    font-weight: 700;
}

section.teams-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--main-padding) * 2) var(--main-padding);
    grid-column: start / end;
}

.video-wrapper.position-relative {
    height: calc((100vh - var(--header-height) - var(--notification-bar-height) - var(--admin-bar--height, 0px)));
    position: relative;
}



.director-text > * + * {
    margin-top: 1rem;
}
.director-text > * + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: calc(var(--main-padding)*1.5);
}

.director-text ul {
    columns: 2;
    column-gap: var(--main-padding);
    orphans: 3;
}

.director-text ul li + li {
    margin-top: 1rem;
}

.director-text ul p {
    font-size: 1rem;
}

article.contact-content {
    display: grid;
    grid-template-columns: [start] 1fr [center] 1fr [end];
    gap: calc(var(--main-padding) * 3) var(--main-padding);
}

ul.buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

ul.institutions-list {
    display: flex;
    gap: 0 1rem;
    flex-wrap: wrap;
    color: var(--mid-grey, #888);
}

.block.text {
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: var(--main-padding); */
}

.work-info-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* width: 100%; */
}

.work-info-container p.caption {
    font-size: .75rem;
}

section.events-lists {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

section.work-info {
    text-align: left;
}

/* Publication Slideshow */
.slideshow-container {
  position: relative;
  width: 100%;
}

.slideshow-container .slide {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slideshow-container .slide[data-slide="1"] {
  display: block;
  opacity: 1;
}

.slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.2);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease;
}

.slideshow-nav:hover {
  background: rgba(0, 0, 0, 0.5);
}

.slideshow-nav.prev {
  left: 10px;
}

.slideshow-nav.next {
  right: 10px;
}

.slideshow-counter {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.875rem;
}

/* Add some spacing before product description */
.product-description {
  margin-top: 1rem;
}

/* Product Images - Desktop and Tablet */
.product-images-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}

.product-image-item {
  margin: 0;
  opacity: 1;
  display: block;
}

/* Hide mobile slideshow controls on desktop/tablet */
.mobile-slideshow-controls {
  display: none;
}

/* Hide dot pagination on desktop/tablet */
.slideshow-pagination {
  display: none;
}

/* Product Images - Desktop and Tablet */
.product-images-desktop {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.product-images-desktop figure {
  margin: 0;
}

/* Hide mobile swiper on desktop/tablet */
.product-images-mobile {
  display: none;
}
.site-title-link {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
}

.site-title-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.theme-toggle-item {
  display: flex;
  align-items: center;
}

.theme-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle-pill {
  position: relative;
  width: 3rem;
  height: 1.5rem;
  background: light-dark(var(--line-grey), var(--dark-grey));
  border-radius: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: background 0.2s ease;
}

.theme-toggle-dot {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: light-dark(var(--white), var(--mini-grey));
  border-radius: 50%;
  transition: transform 0.2s ease;
}

/* Position states for the dot */
.theme-toggle-pill.state-auto .theme-toggle-dot {
  transform: translateX(0);
}

.theme-toggle-pill.state-light .theme-toggle-dot {
  transform: translateX(0.75rem);
}

.theme-toggle-pill.state-dark .theme-toggle-dot {
  transform: translateX(1.5rem);
}

/* State-specific colors */
.theme-toggle-pill.state-auto {
  background: light-dark(var(--line-grey), var(--dark-grey));
}

.theme-toggle-pill.state-light {
  background: var(--mini-grey);
}

.theme-toggle-pill.state-dark {
  background: var(--dark-grey);
}

.theme-toggle-label {
  font-size: 0.875rem;
  width: 2.5rem;
}

/* Newsletter Signup Form Styling */
.sib-form {
  font-family: 'OPS documenta grotesk', Helvetica, Arial, sans-serif;
  background-color: transparent;
  text-align: left;
  /* display: flex; */
  /* gap: var(--main-padding); */
}

#sib-container {
  max-width: 600px;
}

.form-section {
  /* padding: 0.5rem 0; */
}

#sib-container h3 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

#sib-container p {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

#sib-container .sib-text-form-block p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: light-dark(var(--dark-grey), var(--mini-grey));
}

#sib-container .entry__label {
  display: block;
  /* font-size: 1rem; */
  margin-bottom: 0.5rem;
  /* color: light-dark(var(--dark-grey), var(--mini-grey)); */
  /* font-weight: 600; */
}

#sib-container .entry__label[data-required]::after {
  content: " *";
  color: #e74c3c;
}

#sib-container .entry__field {
  margin-bottom: 0.5rem;
}

#sib-container .input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid light-dark(var(--line-grey), var(--dark-grey));
  border-radius: 2.75rem;
  background-color: light-dark(var(--white), var(--dark-bg));
  color: light-dark(var(--black), var(--white));
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transition-time) ease-in-out;
}

#sib-container .input:focus {
  outline: none;
  border-color: light-dark(var(--black), var(--white));
}

#sib-container .entry__specification {
  color: light-dark(var(--mid-grey), var(--line-grey));
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

#sib-container .entry__error {
  color: #e74c3c;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

/* Checkbox and Radio Button Styling */
#sib-container .checkbox__label,
#sib-container .entry__choice label {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

#sib-container .checkbox_tick_positive,
#sib-container .radio-button {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  border: 1px solid light-dark(var(--line-grey), var(--mid-grey));
  background-color: light-dark(var(--white), var(--dark-bg));
  position: relative;
}

#sib-container .checkbox_tick_positive {
  border-radius: 0.25rem;
}

#sib-container .radio-button {
  border-radius: 50%;
}

#sib-container .input_replaced {
  position: absolute;
  opacity: 0;
}

#sib-container .input_replaced:checked + .checkbox_tick_positive::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: light-dark(var(--black), var(--white));
  font-size: 0.75rem;
}

#sib-container .input_replaced:checked + .radio-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: light-dark(var(--black), var(--white));
}

/* Form Button Styling */
#sib-container .sib-form-block__button {
  border-radius: 2.75rem;
  background: light-dark(var(--black), var(--white));
  color: light-dark(var(--white), var(--black));
  display: inline-flex;
  padding: 0.5rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  cursor: pointer;
  font-size: 1rem;
  border: none;
  transition: background-color var(--transition-time) ease-in-out;
  /* margin-top: 1rem; */
}

#sib-container .sib-form-block__button:hover {
  background: light-dark(var(--dark-grey), var(--mini-grey));
}

#sib-container .progress-indicator__icon {
  width: 1rem;
  height: 1rem;
  animation: rotation 1s linear infinite;
}

/* Form message panels */
.sib-form-message-panel {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  display: none;
}

#error-message {
  background-color: #ffeded;
  color: #661d1d;
  border: 1px solid #ff4949;
}

#success-message {
  background-color: #e7faf0;
  color: #085229;
  border: 1px solid #13ce66;
}

.sib-form-message-panel .sib-notification__icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Form Layout for larger screens */
@media (min-width: 768px) {
  #sib-container .form__entry.entry_block {
    /* display: grid; */
    /* grid-template-columns: 1fr 2fr; */
    /* gap: 1rem; */
    /* align-items: start; */
  }
  
  #sib-container .form__label-row {
    display: contents;
  }
  
  #sib-container .entry__label {
    /* margin-bottom: 0; */
    /* padding-top: 0.75rem; */
  }
}

/* Consent message styling */
.recaptcha-consent-message {
  background-color: light-dark(var(--tiny-grey), var(--dark-grey));
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid light-dark(var(--line-grey), var(--mid-grey));
}

.recaptcha-consent-message button {
  border-radius: 2.75rem;
  background: light-dark(var(--black), var(--white));
  color: light-dark(var(--white), var(--black));
  padding: 0.5rem 1.5rem;
  margin-top: 1rem;
  cursor: pointer;
  border: none;
  font-weight: bold;
  transition: background-color var(--transition-time) ease-in-out;
}

.recaptcha-consent-message button:hover {
  background: light-dark(var(--dark-grey), var(--mini-grey));
}

form#sib-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    display: flex;
}

section.newsletter {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

nav.page-navigation {
  margin-top: var(--admin-bar--height, 0);
  padding: var(--main-padding) var(--main-padding) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav.main-menu a.active, nav.pagination-nav a.active {
    font-weight: 600;
}

article .block.image {width: 100%;display: flex;justify-content: flex-end;}

header.article-header.institutions.full {
    padding: 0 var(--main-padding);
}

article section h3.location-name {
    margin-top: 0;
}

main.rent {
    padding-bottom: calc(var(--main-padding) * 3);
}

.lg-components {
    padding: var(--main-padding);
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1rem;
}

swiper-container.swiper.artists {
    /* cursor: grab; */
}


article.subrent-content {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

section.gallery {display: flex;flex-direction: column;gap: 1rem;}

.menu-elements-right {
    display: flex;
    gap: 2rem;
    align-items: center;
}

ul.accessibility-menu {
    display: flex;
    gap: 1rem;
}

.hide-large {
    display: none;
}

ul#main-menu section.accessibility {
    grid-column: start / end;
}

#sib-container .sib-form__declaration p, #sib-container .checkbox-text p {
    /* display: flex; */
    /* gap: 1rem; */
    font-size: 1rem;
}

.declaration-block-icon svg {
    width: max(15%,3rem);
}

article.subrent-content {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

article .column:first-of-type .block.image {
  justify-content: flex-start;
}

.director {
    display: flex;
    justify-content: flex-end;
}

footer p.created-by {
    grid-column: span 2;
}

nav.main-menu ul.language-switcher {
    display: none;
}

ul#main-menu section.accessibility nav.accessibility-nav {
    display: none;
}

iframe {
    width: 100%;
}

iframe.brevo-general {
    height: 750px;
}

iframe.brevo-press {
    height: 886px;
}

iframe.brevo-friends {
    height: 1886px;
}

.video-caption-dialog {
  border: none;
  border-radius: 0.5rem;
  padding: 0;
  max-width: 100vw;
  width: 100%;
  /* Fallback for browsers not supporting light-dark() */
  background-color: var(--white);
  color: var(--black);
  /* Modern browser support with light-dark() */
  background-color: light-dark(var(--white), var(--dark-bg));
  color: light-dark(var(--black), var(--white));
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  margin: auto;
}

@media (prefers-color-scheme: dark) {
  .video-caption-dialog {
    background-color: var(--dark-bg);
    color: var(--white);
  }
}

.video-caption-dialog::backdrop {
  /* Fallback without blur effect */
  background-color: rgba(0, 0, 0, 0.5);
}

@supports (backdrop-filter: blur(10px)) {
  .video-caption-dialog::backdrop {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25));
  }
}

/* Center the dialog vertically and horizontally when open */
.video-caption-dialog[open] {
  display: flex;
  position: fixed;
  inset: 0;
  margin: auto;
  height: 100vh;
  max-height: 100vh;
}

.video-caption-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.video-info-btn {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 11;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-info-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--white);
}

/* Mobile styles for dialog */
@media screen and (max-width: 767px) {
  .video-caption-dialog {
    max-width: 100vw;
    border-radius: 0;
    margin: 0;
    height: 100vh;
  }
  
  .video-caption-dialog .dialog-body {
    padding: 1rem;
    /* max-height: calc(100vh - 4rem); */
  }
}

.dialog-body {
    padding: var(--main-padding);
}

.dialog-body p {
    max-width: unset;
}

.dialog-header {
    display: flex;
    justify-content: flex-end;
    padding: var(--main-padding);
}

.dialog-close svg {
    width: 100%;
}

button.dialog-close {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.7rem;
}

span.play-icon {margin-left: 1px;}

ul.external-downloads-list {
  display: grid;
  grid-template-columns: [start] repeat(auto-fill, minmax(400px, 1fr)) [end];
  gap: 2rem;
}

ul.external-downloads-list figure.thumbnail img {
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: left bottom;
}

.overview .documenta-number {
    margin-bottom: -4px;
}

.external-download figcaption {
    font-size: 1.8rem;
}