/* theme "tm26" */

@font-face {
  font-family: "Computer Modern Transversale";
  src: url("/fonts/cm-transversale/ComputerModernTransversale.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Computer Modern Transversale";
  src: url("/fonts/cm-transversale/ComputerModernTransversale-Italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
}

:root {
  /* definitions from theme, additional colors */

  --tm26-colorBackground: #49292a;
  --tm26-colorBackgroundMouseover: #b4a7ac26;
  --tm26-colorAkzent1: #ff9900;
  --tm26-colorAkzent2: #00ff33;
  --tm26-colorAkzent3: #556f8a;
  --tm26-colorAkzent1Mouseover: #99ccff;
  --tm26-colorAkzent2Mouseover: #99ccff;
  --tm26-colorExtraAkzent: #6c4722cc;
  --tm26-colorExtraAkzentMouseover: #99ccff;
  --tm26-colorText: #f5f5c8;
  --tm26-colorTextMouseover: #99ccff;
  --tm26-colorStretch: #ff9900;
  --tm26-colorMenuBackground: #0000001a;
  --tm26-colorMenuOpenBackground: #49292a;
  --tm26-colorMenuText: #49292a;
  --tm26-colorMenuTextBackground: #00ff33;
  --tm26-colorButtonBackground: #00ff33;
  --tm26-colorButtonBackgroundMouseover: #99ccff;
  --tm26-colorButtonText: #49292a;
  --tm26-colorButtonTextMouseover: #49292a;
  --tm26-colorButtonSolidBackground: #00ff33;
  --tm26-colorButtonSolidBackgroundMouseover: #99ccff;
  --tm26-colorButtonSolidText: #49292a;
  --tm26-colorButtonSolidTextMouseover: #49292a;
  --tm26-colorButtonSlideBackground: transparent;
  --tm26-colorButtonSlideBackgroundMouseover: rgba(255, 255, 255, 0.05);
  --tm26-colorButtonSlideText: #ffffff;
  --tm26-colorButtonSlideTextMouseover: #f0a0be;

  --tm26-colorNews: #6c4722cc;
  --tm26-colorFestival: #527539cc;
  --tm26-colorResidents: #556f8acc;
  --tm26-colorStudio: #3a2426cc;
  --tm26-colorPublications: #5a5705cc;
  --tm26-colorAbout: #282322cc;

  --tm26-colorDarkShade: #cabdb1;
  --tm26-colorDisabled: #08080880;

  --tm26-ContainerShadow: #9966661a;
  --tm26-circleShadow: #ff0000;

  --Colours-News: #6c4722cc;
  --Colours-Festival: #527539cc;
  --Colours-Residents: #556f8acc;
  --Colours-Studio: #3a2426cc;
  --Colours-Publications: #5a5705cc;
  --Colours-About: #282322cc;
}

/* tm26, typography, headline */

#Theming .HeadlineBlock,
#Theming .headlineLarge {
  color: var(--tm26-colorText);
}

/* tm26, typography, quote  */

#Theming .container.style_quote-narrow > :not(.caption) {
  font-family: "Computer Modern Transversale";
  line-height: 130%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#Theming .container.style_quote-narrow {
  --quote-gap: 20px;
  --quote-shape: 100px;
  padding: 0;
  position: relative;
}

/* static version of tmbase grid & column function */
/*
  $column-amount: 12;
  $gap-desktop: 20px;
  $gap-mobile: 10px;
  */

@media (min-width: 740px) {
  #Theming .container.style_quote-narrow {
    width: calc((100% - 11 * 20px) / 12 * 8 + 20px * (8 - 1));
  }
}
@media (max-width: 740px) {
  #Theming .container.style_quote-narrow {
    --quote-gap: 10px;
    --quote-shape: 30px;
  }
}

#Theming .container.style_quote-narrow {
  padding-left: calc(var(--quote-shape) + var(--quote-gap)); /* gap-s */
}
#Theming .container.style_quote-narrow::before {
  content: "";
  position: absolute;
  width: var(--quote-shape);
  height: 100%;
  left: 0;
  background-image: url(/images/tm26/quote/tm26-quote-00.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 740px) {
  #Theming .container.style_quote-narrow::before {
    background-position: top;
  }
}

#Theming .Block:has(.container.style_quote-narrow):nth-of-type(odd) .container.style_quote-narrow {
  padding-left: 0;
  padding-right: calc(var(--quote-shape) + var(--quote-gap));
  text-align: right;
}
#Theming .Block:has(.container.style_quote-narrow):nth-of-type(odd) .container.style_quote-narrow::before {
  background-image: url(/images/tm26/quote/tm26-quote-01.svg);
  left: unset;
  right: 0;
}

/* tm26, menu */

.transversale path {
  stroke: var(--tm26-colorText) !important;
}

nav.quickmenu:hover path {
  stroke: var(--tm26-colorAkzent1Mouseover) !important;
}

.MenuBar {
  backdrop-filter: blur(20px);
}

.egg {
  color: var(--tm26-colorAkzent2) !important;
  border-color: currentColor !important;
}

.egg:hover {
  color: var(--tm26-colorText) !important;
  border-color: currentColor !important;
}

.QuickMenu .special {
  background-color: var(--tm26-coloursAkzent1) !important;
}

.menuText a.special {
  background-color: var(--tm26-colorAkzent1) !important;
}

@media (min-width: 900px) {
  nav.quickmenu {
    margin-right: 59px !important;
  }

  nav.quickmenu:not(.open)::after {
    content: "";
    position: absolute;
    z-index: 100;
    left: 54px;
    top: 16px;
    width: 72px;
    height: 75px;
    background-image: url(/images/tm26/tm26_logo_menu.svg);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transform: rotate(0deg);
    transition: all 300ms ease-out;
    transition-property: transform, top, left;
  }
  nav.quickmenu:hover::after {
    transform: rotate(-90.0856deg);
    top: 8px;
    left: 59px;
    background-image: url(/images/tm26/tm26_logo_menu_hover.svg);
  }
}

.transversale * {
  transform: none !important;
}

/* theming, background gradient */

#Theming::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  background: linear-gradient(
    180deg,
    #f69c01 42px,
    #49292a calc(19.71% + 42px),
    #423430 calc(87.5% - 42px),
    #527539 calc(100% - 42px)
  );
}

/* tm26, footer */

#Theming .Footer {
  --tm26-script-height: 160px;
  --tm26-script-width: 950px;
  background-color: var(--tm26-colorBackground);
  margin-top: calc(var(--spacing-block-side) + var(--tm26-script-height));
  box-shadow: none;
}
@media (min-width: 750px) {
  #Theming .Footer {
    --tm26-script-width: calc((100vw - 11 * 20px) / 12 * 8 + 20px * (8 - 1));
    --tm26-script-height: calc(var(--tm26-script-width) * 0.16842105);
  }
}
@media (min-width: 1280px) {
  #Theming .Footer {
    --tm26-script-width: 800px;
    --tm26-script-height: calc(var(--tm26-script-width) * 0.16842105);
  }
}
@media (max-width: 750px) {
  #Theming .Footer {
    --tm26-script-width: calc(100vw - 2 * var(--spacing-block-side));
    --tm26-script-height: calc(var(--tm26-script-width) * 0.16842105);
  }
}
.Footer::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  height: var(--tm26-script-height);
  width: var(--tm26-script-width);
  max-width: 800px;
  top: calc(-1 * var(--tm26-script-height));
  left: 50%;
  transform: translateX(-50%);
  background-image: url(/images/tm26/tm26_footer_script.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-block-start: auto;
  margin-block-end: auto;
}
@media (max-width: 750px) {
  .Footer::before {
    max-width: calc(100vw - 2 * var(--spacing-block-side));
  }
}

#Theming .Footer[open] a {
  background-color: transparent;
}
#Theming .Footer[open] a,
#Theming .Footer[open] span {
  color: var(--tm26-colorText);
}

#Theming .Footer[open] a:has(span):hover {
  background-color: var(--tm26-colorBackgroundMouseover);
  border-color: currentColor;
}
#Theming .Footer[open] a:hover,
#Theming .Footer[open] a:hover span {
  color: var(--tm26-colorTextMouseover);
}

/* theming, container */

#Theming .Body,
#Theming .ModuleContainer.container,
#Theming .module.news > .container {
  background: var(--tm26-colorBackground, #49292a);
  /* light container */
  box-shadow:
    0 0 var(--container-effects-ds, 20px) 0 var(--tm26-colorAkzent1, #f90),
    0 0 var(--container-effects-is, 20px) 0 var(--tm26-colorAkzent1, #f90) inset;
  backdrop-filter: blur(calc(var(--container-effects-bb, 0) / 2));
}
#Theming .module.news > .container{
  background: var(--tm26-colorNews);
}
#Theming .module.pressRelease > .layoutBlock > .container,
#Theming .module.pressRelease > .container {
  background-color: none;
  box-shadow: none;
  backdrop-filter: none;
}

#Theming .Body.body-container-dark,
#Theming .ModuleContainer.container-dark {
  background: var(--tm26-colorAbout, rgba(40, 35, 34, 0.8));

  /* dark container */
  box-shadow:
    0 0 var(--container-effects-ds, 20px) 0 var(--colours-button-clear-mo, rgba(180, 167, 172, 0.15)),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Dark-Shade, rgba(8, 8, 8, 0.5)) inset;
  backdrop-filter: blur(calc(var(--container-effects-bb, 0) / 2));
}

/* theming, topper */

#Theming .topper * {
  color: var(--color-text);
}

#Theming .topper {
  background: var(--Colours-Festival, rgba(82, 117, 57, 0.8));

  /* festivals */
  box-shadow:
    0 0 var(--DS, 50px) 0 var(--Colours-Akzent-2, #0f3),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Akzent-2, #0f3) inset;
  backdrop-filter: blur(calc(var(--BB, 0) / 2));
}

#Theming .topper.festival,
#Theming .Body.body-top-festival {
  background: var(--Colours-Festival, rgba(82, 117, 57, 0.8));

  /* festivals */
  box-shadow:
    0 0 var(--DS, 50px) 0 var(--Colours-Akzent-2, #0f3),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Akzent-2, #0f3) inset;
  backdrop-filter: blur(calc(var(--BB, 0) / 2));
}

#Theming .topper.person,
#Theming .Body.body-top-residents {
  background: var(--Colours-Residents, rgba(85, 111, 138, 0.8));

  /* residents */
  box-shadow:
    0 0 var(--container-effects-ds, 20px) 0 var(--Colours-Akzent-2, #0f3),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Akzent-1, #f90) inset;
  backdrop-filter: blur(calc(var(--BB, 0) / 2));
}

#Theming .topper.event,
#Theming .Body.body-top-event {
  background: var(--Colours-Studio, rgba(58, 36, 38, 0.8));

  /* studio */
  box-shadow:
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Akzent-3, #556f8a) inset,
    0 0 var(--container-effects-ds, 20px) 0 var(--Colours-Akzent-1, #f90);
  backdrop-filter: blur(calc(var(--container-effects-bb, 0) / 2));
}
#Theming .topper.artwork,
#Theming .Body.body-top-artwork {
  background: var(--Colours-Publications, rgba(90, 87, 5, 0.8));

  /* publications */
  box-shadow:
    0 0 var(--container-effects-ds, 20px) 0 var(--Colours-Akzent-1, #f90),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Akzent-1, #f90) inset;
  backdrop-filter: blur(calc(var(--container-effects-bb, 0) / 2));
}

#Theming .topper.pressRelease,
#Theming .Body.body-top-publications {
  background: var(--Colours-Publications, rgba(90, 87, 5, 0.8));

  /* publications */
  box-shadow:
    0 0 var(--container-effects-ds, 20px) 0 var(--Colours-Akzent-1, #f90),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Akzent-1, #f90) inset;
  backdrop-filter: blur(calc(var(--container-effects-bb, 0) / 2));
}

#Theming .topper.news,
#Theming .Body.body-top-news {
  background: var(--Colours-News, rgba(108, 71, 34, 0.8));

  /* news */
  box-shadow:
    0 0 var(--container-effects-ds, 20px) 0 var(--Colours-Akzent-1, #f90),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Akzent-1, #f90) inset;
  backdrop-filter: blur(calc(var(--BB, 0) / 2));
}
#Theming .topper.about,
#Theming .Body.body-top-about {
  background: var(--Colours-About, rgba(40, 35, 34, 0.8));

  /* about */
  box-shadow:
    0 0 var(--container-effects-ds, 20px) 0 var(--Colours-Akzent-1, #f90),
    0 0 var(--container-effects-is, 20px) 0 var(--Colours-Background, #49292a) inset;
  backdrop-filter: blur(calc(var(--container-effects-bb, 0) / 2));
}

/* theming, circles */

#Theming .circle {
  background-image: none;
  box-shadow: unset;
  border-radius: unset;
  border: unset;
  z-index: -1;
}
#Theming .circle:after {
  background-image: none;
  box-shadow: unset;
  border-radius: unset;
}

#Theming .circle img {
  opacity: 1;
  mask-image: none;
  border-radius: unset;
  box-shadow: unset;
}

/* theming, circle medium */

#Theming .CirclesMedium p {
  background-color: var(--tm26-colorAkzent3);
  padding: 5px;
}

#Theming .CirclesMedium .arrow {
  display: none;
}

#Theming .CirclesMedium:hover * {
  color: inherit;
}

/* theming, circle medium, svg animation */

#Theming .CirclesMedium img {
  object-fit: contain;
  padding: 0 14.8px;
}
#Theming .CirclesMedium .item img {
  transition: filter 450ms ease-out;
}
#Theming .CirclesMedium .item:hover img {
  filter: drop-shadow(-2.7px 0 var(--tm26-colorText)) drop-shadow(0 -2.7px 0 var(--tm26-colorText))
    drop-shadow(2.7px 2.7px 0 var(--tm26-colorText)) drop-shadow(0 2.7px 0 var(--tm26-colorText))
    drop-shadow(0 0 7.4px var(--tm26-colorTextMouseover));
}

/* theming, button link, text color */

#Theming a.button,
#Theming .download-single a {
  color: var(--tm26-colorText);
}
#Theming a.button:hover,
#Theming .download-single a:hover {
  background-color: var(--tm26-colorBackgroundMouseover);
  color: var(--tm26-colorTextMouseover);
  border-color: currentColor;
}
#Theming .download-single a:hover .title {
  color: var(--tm26-colorTextMouseover);
}

/* theming, news figma */
#Theming .module.news a.button {
  color: var(--color-button-text);
  background-color: var(--color-button-background);
}
#Theming .module.news a.button:hover {
  background-color: var(--color-button-background-mouseover);
}

/* theming, people, residents, container */

#Theming .PeopleQuery .container:nth-of-type(2n + 1),
#Theming .participantsOverview .container:nth-of-type(2n + 1) {
  background-color: var(--tm26-colorStudio);
}

/* theming, people, residents, circle */

#Theming .CirclesMini a:hover .heading {
  color: var(--tm26-colorText);
}

#Theming .CirclesMini .circle {
  color: transparent;
  width: 145px;
  height: 120px;
  background-image: url(/images/tm26/participants/participant-0.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  box-shadow: none;
  z-index: unset;
  transition: all 300ms ease-out;
}
#Theming .CirclesMini.media-small .circle {
  width: 80px;
  height: 50px;
  background-position: top;
}

#Theming .CirclesMini .item:nth-of-type(7n + 1) .circle {
  background-image: url(/images/tm26/participants/participant-0.png);
}
#Theming .CirclesMini .item:nth-of-type(7n + 2) .circle,
#Theming .CirclesMini .item:nth-of-type(7n + 5) .circle {
  background-image: url(/images/tm26/participants/participant-2.png);
}
#Theming .CirclesMini .item:nth-of-type(7n + 3) .circle,
#Theming .CirclesMini .item:nth-of-type(7n + 6) .circle {
  background-image: url(/images/tm26/participants/participant-1.png);
}

#Theming .CirclesMini .item:nth-of-type(7n + 4) .circle,
#Theming .CirclesMini .item:nth-of-type(7n + 7) .circle {
  background-image: url(/images/tm26/participants/participant-3.png);
}

/* circles, hover */

#Theming .CirclesMini a:hover .circle {
  transform: rotate(30deg);
  filter: drop-shadow(0px 0px 20px var(--tm26-circleShadow));
}
#Theming .CirclesMini.media-small a:hover .circle {
  filter: drop-shadow(0px 0px 10px var(--tm26-circleShadow));
}

/* bigGallery, full bleed */

#Theming .biggallery .Block {
  margin: 0;
  padding: 0;
  max-width: none;
}

#Theming .biggallery .Block img {
  width: 100%;
  height: auto;
}

/* PEOPLE ASSETS */

#Theming .CirclesMini .item:nth-of-type(15n + 1) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople1.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 2) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople2.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 3) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople3.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 4) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople4.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 5) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople5.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 6) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople6.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 7) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople7.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 8) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople8.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 9) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople9.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 10) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople10.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 11) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople11.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 12) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople12.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 13) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople13.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 14) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople14.png);
}

#Theming .CirclesMini .item:nth-of-type(15n + 15) .circle {
  background-image: url(/images/tm26/people/tm26_dpeople15.png);
}

/* SEMI-RANDOM ROTATION */

#Theming .CirclesMini .item:nth-of-type(6n + 1) a:hover .circle {
  transform: rotate(-21deg);
}

#Theming .CirclesMini .item:nth-of-type(6n + 2) a:hover .circle {
  transform: rotate(-34deg);
}

#Theming .CirclesMini .item:nth-of-type(6n + 3) a:hover .circle {
  transform: rotate(30deg);
}

#Theming .CirclesMini .item:nth-of-type(6n + 4) a:hover .circle {
  transform: rotate(2deg);
}

#Theming .CirclesMini .item:nth-of-type(6n + 5) a:hover .circle {
  transform: rotate(20deg);
}

#Theming .CirclesMini .item:nth-of-type(6n + 6) a:hover .circle {
  transform: rotate(26deg);
}
