@charset "UTF-8";
@font-face {
  font-family: "Raisonne Book";
  src: url("/fonts/raisonne-book/raisonne-book-pro.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Raisonne Bold";
  src: url("/fonts/raisonne-bold/raisonne-bold-pro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
::view-transition {
  pointer-events: none;
  navigation: auto;
}

@property --_w {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
@property --_h {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vh;
}
:root {
  view-transition-name: none;
  --w: tan(atan2(var(--_w),1px));
  --h: tan(atan2(var(--_h),1px));
  --vh100: 100vh;
  --fs: calc(100% * 15 / 16);
  --fs_xs: clamp(0.625rem, 0.5536rem + 0.3571vw, 0.875rem);
  --fs_s: 86.6666666667%;
  --fs_m: clamp(0.875rem, 0.7679rem + 0.5357vw, 1.25rem);
  --fs_l: clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem);
  --fs_xl: clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem);
  --fs_max: clamp(2rem, 1.6071rem + 1.9643vw, 3.375rem);
  --ff: "Raisonne Book",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ff_alt: "Raisonne Bold",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --lh: 1.4;
  --fill: .5em;
  --pad: 1em;
  --gap: min(var(--fill), 2lh);
  --mrgn: 1lh;
  --maxp: 58ch;
  --black: #000;
  --black_alt: #404040;
  --grey: #7f7f7f;
  --white: #fff;
  --offwhite: #f7f7f7;
  --purple: #808cff;
  --purple20: #e2e4fc;
  --pink: #f62a86;
  --pink20: #fdd4e7;
  --yellow: #ffc100;
  --yellow20: #fff3cc;
  --green: #40cf90;
  --green20: #d9f5e9;
  --color: var(--black);
  --bg: var(--offwhite);
  --default_bg: rgba(0, 0, 0, .1);
  --cspcl: var(--black);
  --line_thickness: 10;
}

@supports (height: 100dvh) {
  :root {
    --vh100: 100dvh;
  }
}
@media screen {
  html {
    height: 100%;
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.15;
    scroll-behavior: smooth;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }
  body {
    min-height: 100%;
    overflow-x: clip;
    margin: 0;
    padding: 0 var(--fill);
    color: var(--color);
    accent-color: var(--color);
    font-family: var(--ff);
    font-size: var(--fs);
    line-height: var(--lh);
    background: var(--sbg, var(--bg));
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff_alt);
    font-weight: 400;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  h1, .like_h1, .alt h2 {
    margin: 1em 0 0.5em;
    font-size: var(--fs_max);
    line-height: 1;
  }
  h2 {
    margin: 1em 0 0.5em 0;
    font-size: var(--fs_xl);
    line-height: 1.125;
  }
  h3, h4, h5, h6 {
    margin: var(--mrgn) 0 0;
    font-size: 100%;
    line-height: 1.2;
  }
  h3 + * {
    margin-top: 0.5rem;
  }
  h4 + *, h5 + * {
    margin-top: 0;
  }
  p {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  ul, ol {
    padding-inline-start: 1lh;
  }
  li {
    text-wrap: pretty;
  }
  a {
    color: inherit;
    background-color: transparent;
  }
  b, strong {
    font-family: var(--ff_alt);
    font-weight: 400;
  }
  img {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
  }
  img:not([alt]) {
    filter: grayscale(100%);
  }
  img[src$=".svg"] {
    width: 100%;
    height: auto;
    max-width: none;
  }
  svg {
    max-width: 100%;
    height: auto;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  video, picture, canvas, iframe, object {
    display: block;
    max-width: 100%;
    height: auto;
  }
  figure {
    margin-left: auto;
    margin-right: auto;
  }
  figure img {
    vertical-align: top;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  hr {
    height: 0;
    margin: 2lh auto;
    color: var(--cspcl);
    border: none;
    border: 2px solid var(--cspcl);
    border-radius: 999em;
  }
  hr + * {
    margin-top: 0;
  }
  *:focus:not(:focus-visible) {
    outline: none;
  }
  *:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
  }
  input, button, textarea, select {
    font: inherit;
  }
  button,
  ::file-selector-button {
    inline-size: fit-content;
    touch-action: manipulation;
    user-select: none;
  }
  button, input, optgroup, select, textarea {
    font: inherit;
    line-height: 1.15;
    margin: 0;
  }
  textarea {
    resize: vertical;
  }
  button, input {
    overflow: visible;
    color: inherit;
  }
  button, select {
    text-transform: none;
  }
  button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
  }
  button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  fieldset {
    padding: 0;
    margin: 0;
    border: none;
  }
  button, summary {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  iframe {
    width: 100%;
    border: 0;
  }
  [hidden] {
    display: none !important;
  }
  .visually_hidden, .vh, .js .ready .waiting, #meta span {
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  }
  .invisible {
    visibility: hidden;
  }
  .container > *:first-child, #newsletter fieldset > *:first-child, .quote blockquote > *:first-child, .copy > *:first-child, aside > *:first-child, .item figure:not(.quote) figcaption > *:first-child, .table td > *:first-child, .staircase > * > *:first-child, .txt > *:first-child, .intro > *:first-child, section > *:first-child, main summary + div > *:first-child {
    margin-block-start: 0;
  }
  .container > *:last-child, #newsletter fieldset > *:last-child, .quote blockquote > *:last-child, .copy > *:last-child, aside > *:last-child, .item figure:not(.quote) figcaption > *:last-child, .table td > *:last-child, .staircase > * > *:last-child, .txt > *:last-child, .intro > *:last-child, section > *:last-child, main summary + div > *:last-child {
    margin-block-end: 0;
  }
  .fw, footer, #partner, #koop {
    --fwbg: var(--black);
    border-image: conic-gradient(var(--fwbg) 0 0) fill 0//0 100vw;
  }
  .full_bleed, header, .full_bleed_alt, #newsletter {
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
  }
  .full_bleed_alt, #newsletter {
    padding-inline: var(--fill);
  }
  .caps, footer ul, aside dt, .subline, header, .btn, #newsletter button[type=submit], .event p:has(.eventlink) a, .event p:last-child:has(a:only-child) a, .table button, .table p:has(.permalink) a, .staircase > * > p:has(a:only-child) a, main a:only-child[title=""], .skip, h1, .like_h1, .alt h2 {
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  .btn, #newsletter button[type=submit], .event p:has(.eventlink) a, .event p:last-child:has(a:only-child) a, .table button, .table p:has(.permalink) a, .staircase > * > p:has(a:only-child) a, main a:only-child[title=""], .skip {
    cursor: pointer;
    display: inline-block;
    padding: 0.5em 1em;
    line-height: 1;
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--black);
    border-radius: 999em;
    transition: color 0.25s, background-color 0.25s;
  }
  .btn:hover, #newsletter button[type=submit]:hover, .event p:has(.eventlink) a:hover, .event p:last-child:has(a:only-child) a:hover, .table button:hover, .table p:has(.permalink) a:hover, .staircase > * > p:has(a:only-child) a:hover, main a[title=""]:hover:only-child, .skip:hover {
    color: var(--black_alt);
  }
  .invers, #newsletter button[type=submit], .event p:has(.eventlink) a, .event p:last-child:has(a:only-child) a, .staircase > * > p:has(a:only-child) a, main a:only-child[title=""] {
    color: var(--white);
    background: var(--black);
  }
  .invers:hover, #newsletter button[type=submit]:hover, .event p:has(.eventlink) a:hover, .event p:last-child:has(a:only-child) a:hover, .staircase > * > p:has(a:only-child) a:hover, main a[title=""]:hover:only-child {
    color: var(--white);
    background: var(--black_alt);
  }
  .lila {
    --cspcl: var(--purple);
  }
  .pink {
    --cspcl: var(--pink);
  }
  .grün {
    --cspcl: var(--green);
  }
  .gelb {
    --cspcl: var(--yellow);
    --bg: var(--yellow20);
  }
  .badge, .table .dot, .box .dot {
    display: inline-block;
    min-width: 3em;
    aspect-ratio: 1;
    line-height: 3;
    text-align: center;
    color: var(--white);
    font-family: var(--ff_alt);
    font-size: var(--fs_m);
    background: var(--black);
    border-radius: 999px;
  }
  /* Global */
  /* Header */
  header {
    --hpad: .5em;
    position: relative;
    z-index: 100;
    padding-block: var(--hpad);
    padding-inline: var(--fill);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    font-family: var(--ff_alt);
    line-height: 1;
    background: var(--sbg, var(--offwhite));
  }
  header.sticks {
    position: sticky;
    top: 0px;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0);
    transition: box-shadow 0.5s;
  }
  header nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
  header a {
    text-decoration: none;
    white-space: nowrap;
  }
  @supports (backdrop-filter: saturate(100%)) {
    header {
      background: none;
    }
    header:before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: color-mix(in srgb, var(--sbg, var(--offwhite)) 90%, transparent);
      -webkit-backdrop-filter: saturate(100%) blur(10px);
      backdrop-filter: saturate(100%) blur(10px);
    }
  }
  header.scrolled {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  header.scrolled #logo:before {
    opacity: 1;
  }
  header.scrolled #logo svg {
    opacity: 0;
    width: 3em;
  }
  #logo {
    display: grid;
    align-items: center;
  }
  #logo:before {
    content: attr(title);
    opacity: 0;
    display: block;
    grid-area: 1/1;
    padding-block: 0.25em;
    transition: opacity 0.4s ease-in-out;
  }
  #logo svg {
    grid-area: 1/1;
    opacity: 1;
    display: block;
    width: 9em;
    max-width: 12em;
    backface-visibility: hidden;
    transform: translateY(-4%);
    transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  /* Menu */
  nav ul {
    margin: 0;
    padding: 0;
  }
  nav ul ::marker {
    font-size: 0;
  }
  nav summary {
    cursor: pointer;
  }
  .skip {
    position: fixed;
    z-index: -1;
    opacity: 0;
    top: var(--hpad, 1em);
    left: 50%;
    font-size: var(--fs_m);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    transform: translate3d(-50%, -100%, 0);
    transition: transform 0.2s, opacity 0.2s;
  }
  .skip:focus {
    z-index: 11;
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
  #navicon {
    display: none;
    cursor: pointer;
    height: calc(1.5em + 6px);
    margin: 0;
    padding: 0;
    width: 2em;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font: inherit;
    background: transparent;
    border: 0;
  }
  #navicon span, #navicon span:before, #navicon span:after {
    height: 2px;
    width: 2em;
    background: currentColor;
    border-radius: 999em;
    transition-timing-function: ease-in-out;
  }
  #navicon span {
    position: relative;
    display: inline-block;
    transition-duration: 0.1s, 0.1s;
    transition-delay: 0, 0;
    transition-property: background, width, color;
  }
  #navicon span:before, #navicon span:after {
    content: "";
    position: absolute;
    left: 0;
    transition-duration: 0.1s, 0.1s, 0.2s, 0.1s, 0.2s;
    transition-delay: 0.1s, 0, 0, 0;
  }
  #navicon span:before {
    top: -0.6em;
    transition-property: top, transform, background, width, color;
  }
  #navicon span:after {
    bottom: -0.6em;
    transition-property: bottom, transform, background, width, color;
  }
  #navicon[aria-expanded=true] span {
    background-color: transparent;
  }
  #navicon[aria-expanded=true] span:before, #navicon[aria-expanded=true] span:after {
    transition-delay: 0, 0.1s;
  }
  #navicon[aria-expanded=true] span:before {
    top: 0;
    transform: rotate(45deg);
  }
  #navicon[aria-expanded=true] span:after {
    bottom: 0;
    transform: rotate(-45deg);
  }
  #menu {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  #menu details {
    position: relative;
  }
  #menu details ul {
    position: absolute;
    margin-block: 0.25em;
    background: var(--white);
  }
  #menu details a {
    display: block;
    padding-block: 0.25em;
  }
  #menu details li:first-child:after {
    content: "";
    display: block;
    position: relative;
    top: -0.5px;
    margin-block: 0.25em;
    border-bottom: 1px solid;
  }
  #menu summary {
    display: flex;
    align-items: center;
  }
  #menu summary:after {
    content: "→";
    display: inline-flex;
    margin-left: 0.25em;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    font-family: var(--ff);
    outline: 1px solid var(--grey);
    border-radius: 999em;
    transform: rotate(0deg);
    transition: transform 0.25s;
  }
  #menu [open] summary:after {
    transform: rotate(90deg);
  }
  #meta {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
  }
  #meta a {
    display: inline-grid;
    width: 2em;
    height: 2em;
    line-height: 1;
    place-items: center;
    padding: 0.25em;
    font-size: var(--fs_m);
    border: 1px solid;
    border-radius: 999em;
  }
  #meta svg {
    display: block;
    width: 1.25em;
    height: 1.25em;
  }
  [lang=de] #meta a[lang=de],
  [lang=en] #meta a[lang=en] {
    display: none;
    border: 1px solid red;
  }
  /* Main */
  main:not(:has(#partner)) {
    padding-bottom: 4lh;
  }
  main:has(#newsletter:last-child) {
    padding-bottom: 0;
  }
  main p {
    max-width: var(--maxp);
  }
  main ul:not([class]):not([id]):not(:is(main [class], main [id]) ul) {
    list-style-type: none;
    padding: 0;
  }
  main ul:not([class]):not([id]):not(:is(main [class], main [id]) ul) li {
    padding-left: 2em;
  }
  main ul:not([class]):not([id]):not(:is(main [class], main [id]) ul) li::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 0.5em;
    aspect-ratio: 3/1;
    margin-left: -2em;
    margin-right: 0.5em;
    background: color-mix(in srgb, currentColor, transparent 75%);
    border-radius: 999em;
  }
  main ul:not([class]):not([id]):not(:is(main [class], main [id]) ul) li + li {
    margin-top: 0.25em;
  }
  main ul:not([class]):not([id]):not(:is(main [class], main [id]) ul) ::marker {
    content: none;
  }
  main a {
    text-underline-offset: 1.5px;
    text-decoration-thickness: 2px;
    transition: text-decoration-color 0.25s;
  }
  main a:not(:is(:hover, :focus)) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 75%);
  }
  main details {
    margin-block: 1lh;
  }
  main summary {
    cursor: pointer;
    list-style: none;
    border: 2px solid;
  }
  main summary::marker {
    display: none;
  }
  main summary > span {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.5em;
  }
  main summary > span:before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 3em;
    height: 3em;
    background: no-repeat center;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=utf8,<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'> <circle cx='30' cy='30' r='30' fill='black' /> <path fill='white' d='M20.6964 33.9542L23.2051 31.4454L28.1894 36.4297L28.206 18.669L31.9277 18.669L31.8944 36.2137L36.8787 31.2294L39.3875 33.7382L29.9339 43.1917L20.6964 33.9542Z'/> </svg>");
    transform: rotate(-90deg);
    transition: transform 0.4s;
  }
  main summary + div {
    padding: 1em;
  }
  main [open] summary > span:before {
    transform: rotate(0deg);
  }
  section {
    padding-block: var(--pad);
  }
  #hero {
    aspect-ratio: 360/510;
    display: flex;
    flex-direction: column-reverse;
    background: no-repeat center;
    background-size: auto calc(100% - var(--pad));
    background-image: url("/files/grfx/ofta_header_artwork_m.svg");
  }
  .slides {
    --spd: 1em;
    --scnt: 1;
    display: grid;
    place-items: center;
    padding: 1em;
  }
  .slides:hover {
    --spd: 1.5em;
  }
  .slides:has(div:nth-child(2)) {
    cursor: pointer;
  }
  .slides:has(> div:only-child) {
    cursor: pointer;
    padding: 0;
  }
  .slides div {
    --soff: calc(360 / var(--scnt) / 2 * 1deg);
    position: relative;
    grid-area: 1/1;
    display: block;
    margin: 0;
    transition: transform 0.4s, margin 0.4s;
    transform: translate(calc(cos(var(--angle)) * var(--spd)), calc(sin(var(--angle)) * var(--spd)));
    user-select: none;
  }
  .slides img {
    display: block;
    border: 1px solid;
  }
  .slides div:nth-child(1) {
    --angle: calc(0deg + var(--soff));
  }
  .slides div:nth-child(2) {
    --angle: calc(72deg + var(--soff));
  }
  .slides div:nth-child(3) {
    --angle: calc(144deg + var(--soff));
  }
  .slides div:nth-child(4) {
    --angle: calc(216deg + var(--soff));
  }
  .slides div:nth-child(5) {
    --angle: calc(288deg + var(--soff));
  }
  .slides div:nth-child(4) ~ div:last-child,
  .slides div:only-child {
    transform: translate(0, 0);
  }
  .slides div.front {
    z-index: 10;
  }
  .slides div.front:after {
    content: attr(data-credit);
    position: absolute;
    opacity: 0.7;
    right: 0.25em;
    bottom: 0.25em;
    font-size: var(--fs_xs);
    color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .intro {
    margin-block: 1lh;
    font-family: var(--ff_alt);
  }
  .intro > * {
    font-size: var(--fs_m);
    line-height: 1.4;
  }
  .av iframe {
    aspect-ratio: 16/9;
  }
  .txt_img {
    margin-block: 1lh;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  .all {
    --aline: calc(var(--line_thickness) * 1px);
    border: var(--aline) solid;
    border-radius: var(--aline);
    border-left-color: var(--green);
    border-top-color: var(--purple);
    border-right-color: var(--pink);
    border-bottom-color: var(--yellow);
  }
  .all .slides {
    height: 100%;
    padding: 0;
  }
  .all .slides > div {
    height: 100%;
  }
  .all .slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }
  .all .txt {
    padding: 1em;
  }
  .lbx {
    position: relative;
    width: min(100% - var(--fill) * 2, var(--maxp));
    margin-block: 2lh;
    margin-inline: auto;
  }
  .lbx .txt a:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
  }
  .staircase {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  .staircase > * {
    padding-bottom: calc(1lh + var(--fstroke) * 1px);
    margin-bottom: calc(var(--fstroke) * 1px);
  }
  .staircase > * > p:has(a:only-child) a {
    font-family: var(--ff_alt);
  }
  .staircase figure {
    margin: 0 0 1rem;
  }
  .staircase figure img {
    display: block;
    width: 100%;
  }
  .staircase h3 {
    margin: 0;
    font-size: var(--fs_xl);
  }
  .staircase .permalink:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .subline {
    margin: 0;
    font-family: var(--ff_alt);
  }
  /* GRFX */
  .framed {
    --fstroke: var(--line_thickness);
    --fdwn: 20;
    --fbttm: 86;
    position: relative;
    border-block: calc(var(--fstroke) * 1px) solid var(--fbc, currentColor);
  }
  .js .framed {
    border-block: 0;
  }
  .js .framed figure {
    border-radius: calc(var(--fstroke) / 2 * 1px) calc(var(--fstroke) / 2 * 1px) 0 0;
    overflow: clip;
  }
  .framed figure {
    aspect-ratio: 3/2;
    background-color: var(--default_bg);
  }
  .framed figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .frame {
    position: absolute;
    top: calc(var(--fstroke) * -0.5 * 1px);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: scale(1.002);
  }
  .frame path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .box {
    position: relative;
    min-height: 12em;
    padding-block-start: 0;
    padding-block-end: 1rem;
  }
  .box figure {
    aspect-ratio: 3/2;
    background-color: var(--default_bg);
  }
  .box figure img {
    height: 100%;
    object-fit: cover;
  }
  .box figure ~ * {
    margin-inline: 1rem;
  }
  .box figure ~ p {
    margin-block: 0;
  }
  .box h3 {
    margin-block-end: 1rem;
  }
  .box p:has(.permalink) {
    margin-block-start: 1em;
  }
  .box .permalink:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .box .dot {
    position: absolute;
    top: 0.5rem;
    right: -0.5rem;
    z-index: 1;
  }
  .table {
    margin-block: 2lh;
    border-collapse: collapse;
  }
  .table .coi {
    width: 54%;
  }
  .table tbody td {
    border-top: 1px solid;
  }
  .table tbody tr {
    position: relative;
  }
  .table td {
    padding: 1em 2em 1em 0;
    vertical-align: top;
  }
  .table td:last-child {
    padding-right: 0;
  }
  .table td p {
    margin-block: 0;
  }
  .table h3 {
    margin-block: 0rem;
    font-size: var(--fs_xl);
  }
  .table .day, .table .dt {
    font-family: var(--ff_alt);
  }
  .table .dt {
    font-size: var(--fs_l);
  }
  .table .image {
    width: 28%;
  }
  .table .image .framed {
    padding-bottom: calc(var(--fstroke) * 0.5px);
    border-radius: calc(var(--fstroke) / 2 * 1px) calc(var(--fstroke) / 2 * 1px) 0 calc(var(--fstroke) / 2 * 1px);
  }
  .table figure {
    aspect-ratio: 3/2;
    margin: 0;
    background-color: var(--default_bg);
  }
  .table figure img {
    display: block;
    object-fit: cover;
  }
  .table p:has(.permalink) {
    margin-top: 0.5rem;
  }
  .table p:has(.permalink) a {
    font-family: var(--ff_alt);
  }
  .table button {
    font-family: var(--ff_alt);
  }
  .table .dot {
    position: absolute;
    top: 1.5em;
    right: 0.5em;
    z-index: 1;
  }
  .table tfoot {
    border-top: 1px solid;
  }
  .people_table {
    margin-block: 2lh;
  }
  .people_table .poi {
    width: 80%;
  }
  .people_table td p {
    margin-block: 0.5em;
  }
  .people_table img {
    display: block;
  }
  .portrait {
    width: 28%;
    max-width: 16em;
  }
  .downloads {
    padding: 0;
    border-top: 1px solid;
  }
  .downloads ::marker {
    font-size: 0;
  }
  .downloads li {
    border-bottom: 1px solid;
  }
  .downloads a {
    min-height: 4em;
    padding-block: calc(var(--lh) / 2);
    display: flex;
    gap: 1em;
    align-items: center;
    text-decoration: none;
  }
  .downloads a:before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 3em;
    height: 3em;
    background: no-repeat center;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=utf8,<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'> <circle cx='30' cy='30' r='30' fill='black' /> <path fill='white' d='M20.6964 33.9542L23.2051 31.4454L28.1894 36.4297L28.206 18.669L31.9277 18.669L31.8944 36.2137L36.8787 31.2294L39.3875 33.7382L29.9339 43.1917L20.6964 33.9542Z'/> </svg>");
  }
  .downloads b {
    width: auto;
    font-size: var(--fs_m);
  }
  .downloads .voe {
    flex: 0 0 5em;
  }
  .ticketlinks p, .ticketlinks hr {
    margin-block: 0;
  }
  .ticketlinks a {
    display: block;
    padding-block: 1em;
    text-decoration: none;
  }
  .ticketlinks a:after {
    content: " ⇢";
  }
  iframe[src*=youtube], iframe[src*=vimeo] {
    width: 100%;
    aspect-ratio: 16/9;
  }
  article > img {
    display: block;
    margin-block: 1lh;
  }
  .item .txt_img {
    margin-bottom: 2lh;
  }
  .item figure:not(.quote) {
    margin-block: 2lh;
  }
  .item figure:not(.quote) figcaption {
    position: relative;
    padding-top: 0.25em;
    padding-bottom: calc(var(--line_thickness) * 1px + 0.25em);
  }
  .item figure:not(.quote) figcaption:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20%;
    height: calc(var(--line_thickness) * 1px);
    background: var(--black);
    border-radius: 999em;
  }
  .hgroup > * {
    margin-block: 0;
    font-family: var(--ff_alt);
    font-weight: 400;
  }
  .hgroup > p {
    font-size: var(--fs_m);
  }
  .item_main {
    margin-block: 1lh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1lh;
  }
  aside dl {
    margin-bottom: 1em;
  }
  aside dl:only-child {
    border-bottom: 1px solid;
  }
  aside dl + dl {
    margin-top: -1em;
  }
  aside dt {
    display: block;
    padding: 0.25em 0 0 0;
    font-family: var(--ff_alt);
    font-weight: 400;
    border-top: 1px solid;
  }
  aside dd {
    display: block;
    margin: 0;
    padding: 0 0 0.25em 0;
  }
  .quote {
    position: relative;
    margin-block: 2lh;
    padding-top: calc(var(--line_thickness) * 1px + 1em);
  }
  .quote:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: calc(var(--line_thickness) * 1px);
    background: var(--black);
    border-radius: 999em;
  }
  .quote:first-of-type {
    margin-top: 4lh;
  }
  .quote blockquote {
    margin: 0;
    font-size: var(--fs_l);
  }
  .quote > figcaption {
    margin-top: 0.5em;
    font-size: var(--fs_s);
    font-family: var(--ff_alt);
    font-weight: 400;
  }
  .quote > figcaption cite {
    font-style: normal;
  }
  .quote > figcaption:after {
    content: none;
  }
  .event {
    position: relative;
  }
  .event figure {
    aspect-ratio: 3/2;
    background: var(--default_bg);
  }
  .event figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .event p {
    margin-block: 0;
  }
  .event p:has(.eventlink), .event p:last-child:has(a:only-child) {
    margin-top: 0.5rem;
  }
  .event p:has(.eventlink) a, .event p:last-child:has(a:only-child) a {
    font-family: var(--ff_alt);
  }
  .info span {
    display: inline-block;
  }
  .info span + span {
    margin-left: 0.5em;
  }
  .info span + span:before {
    content: "•";
    display: inline-block;
    padding-right: 0.5em;
  }
  .eventlink:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #past_events .dot {
    top: 2.5em;
    right: 1.5em;
  }
  .about p:last-child a:only-child:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .ifrm {
    position: relative;
  }
  .ifrm.all .poster, .ifrm.all iframe {
    border: 0;
  }
  .ifrm .poster {
    aspect-ratio: 16/9;
    background: #f7f7f7;
    border: 1px solid;
  }
  .ifrm .poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ifrm.ready .poster {
    cursor: pointer;
  }
  .ifrm.ready figcaption {
    opacity: 0;
  }
  .ifrm .play_btn {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    top: 50%;
    left: 50%;
    padding: 0;
    background: none;
    border: 0;
    transform: translate(-50%, -50%);
  }
  .ifrm .play_btn svg {
    width: 8em;
    height: 8em;
    opacity: 0.5;
  }
  .ifrm.deny .poster {
    cursor: default;
    pointer-events: none;
  }
  .ifrm.deny .play_btn {
    display: none;
  }
  .ifrm.deny figcaption {
    opacity: 1;
  }
  .ifrm iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    aspect-ratio: 16/9;
    border: 1px solid;
  }
  .ifrm figcaption {
    position: absolute;
    opacity: 1;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    padding: 1em;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    transition: opacity 0.4s;
  }
  @keyframes loader {
    0% {
      opacity: 1;
    }
    25% {
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
  }
  .progress {
    margin-block: 4lh;
    display: flex;
    justify-content: center;
    gap: 1em;
  }
  .progress span {
    background: var(--lc);
    display: inline-block;
    opacity: 0;
    height: calc(var(--line_thickness) * 1px);
    aspect-ratio: 3/1;
    border-radius: 999em;
    animation: loader 4s infinite;
  }
  .progress span:nth-child(2) {
    animation-delay: 1s;
  }
  .progress span:nth-child(3) {
    animation-delay: 2s;
  }
  .progress span:nth-child(4) {
    animation-delay: 3s;
  }
  /* Footer */
  #newsletter {
    margin-top: 1lh;
    background-color: var(--offwhite);
    background-repeat: no-repeat;
    background-size: calc(100% - 2 * var(--fill)) auto;
    background-position: center calc(100% - var(--pad));
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
  }
  #newsletter h2 {
    margin: 0;
  }
  #newsletter:after {
    content: "";
    display: block;
    aspect-ratio: 2/1;
  }
  #newsletter fieldset {
    margin: 0;
    padding-top: 1em;
  }
  #newsletter fieldset p {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 1em 0 0;
  }
  #newsletter fieldset p label {
    opacity: 0;
    transform: translate(0, 50%);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 81.25%;
    line-height: 1;
    transition: opacity 0.2s, transform 0.2s;
  }
  #newsletter fieldset input {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid;
    outline: none;
  }
  #newsletter fieldset input:focus::placeholder, #newsletter fieldset input:user-valid::placeholder {
    color: transparent;
  }
  #newsletter fieldset input:focus + label, #newsletter fieldset input:user-valid + label {
    opacity: 1;
    transform: translate(0, 0%);
  }
  #newsletter fieldset input:user-invalid {
    outline: 2px solid var(--pink);
  }
  #newsletter fieldset + p {
    font-size: var(--fs_xs);
  }
  #newsletter p:has(small) {
    line-height: 1.4;
  }
  #partner, #koop {
    --fwbg: var(--white);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    background-color: var(--white);
  }
  #partner h3, #koop h3 {
    margin: 0;
    font-size: var(--fs);
    font-weight: 400;
    font-family: var(--ff);
  }
  #partner ul, #koop ul {
    margin: var(--mrgn) 0 1em;
    padding: 0;
    text-align: center;
  }
  #partner ul ::marker, #koop ul ::marker {
    font-size: 0;
  }
  #partner li, #koop li {
    padding: 0;
  }
  #partner li:before, #koop li:before {
    content: none;
  }
  #partner li + li, #koop li + li {
    margin-top: 2lh;
  }
  #partner img, #koop img {
    display: inline-block;
    max-width: 56%;
    vertical-align: top;
  }
  #partner img[src$="theater_strahl.svg"],
  #partner img[src$="himbeer.svg"], #koop img[src$="theater_strahl.svg"],
  #koop img[src$="himbeer.svg"] {
    max-width: 42%;
  }
  #koop {
    position: relative;
    border-bottom: 1px solid;
  }
  #koop img {
    max-width: 38%;
  }
  #koop:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid;
  }
  footer {
    position: sticky;
    top: 100vh;
    padding: var(--pad) 0 calc(var(--pad) * 2);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    color: var(--white);
    background: var(--black);
  }
  footer ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    line-height: 1;
    font-size: var(--fs_l);
  }
  footer ul ::marker {
    font-size: 0;
  }
  footer ul:first-of-type {
    font-family: var(--ff_alt);
  }
  footer ul + ul {
    font-family: var(--ff);
    opacity: 0.9;
  }
  footer ul:last-of-type {
    font-size: var(--fs_xs);
    opacity: 0.9;
  }
  footer a {
    text-decoration: none;
    transition: opacity 0.25s;
  }
  footer a:hover {
    opacity: 0.8;
  }
  #logo_footer {
    display: block;
    width: 14em;
    max-width: 62vw;
    margin-bottom: var(--mrgn);
  }
  .js .kulturbus header {
    --hpad: .5em;
    align-items: center;
  }
  .kulturbus #logo svg {
    width: 6em;
    max-width: 12em;
    transform: translateY(0);
  }
  .kulturbus #partner img {
    max-width: min(12em, 100%);
  }
  .kulturbus #logo_footer {
    width: 10em;
    max-width: 50vw;
  }
  .kulturbus footer a {
    white-space: nowrap;
  }
  .tiles_list, #kulturstandorte > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16em, 100%), 1fr));
    gap: 1em;
    padding: 0;
  }
  .tiles_list ::marker, #kulturstandorte > ul ::marker {
    font-size: 0;
  }
  .tiles_list li, #kulturstandorte > ul li {
    padding: 0;
  }
  .tiles_list li:before, #kulturstandorte > ul li:before {
    content: none;
  }
  .tiles_list > li, #kulturstandorte > ul > li {
    position: relative;
    padding: 0.75em 1em;
    background: #f1f1f1;
    border-radius: calc(var(--line_thickness) * 1px);
    transition: background 0.2s;
  }
  .tiles_list > li:hover, #kulturstandorte > ul > li:hover {
    background: #e1e1e1;
  }
  .tiles_list > li:before, #kulturstandorte > ul > li:before {
    content: none;
  }
  .tiles_list > li > a, #kulturstandorte > ul > li > a {
    display: block;
  }
  .tiles_list > li > a:only-of-type:after, #kulturstandorte > ul > li > a:only-of-type:after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
  }
  .tiles_list li + li, #kulturstandorte > ul li + li {
    margin: 0;
  }
  .tiles_list ul, #kulturstandorte > ul ul {
    padding: 0;
  }
  .tiles_list ul ::marker, #kulturstandorte > ul ul ::marker {
    font-size: 0;
  }
  .tiles_list ul li, #kulturstandorte > ul ul li {
    display: inline-block;
    font-size: var(--fs_s);
  }
  .tiles_list ul li:not(:last-child)::after, #kulturstandorte > ul ul li:not(:last-child)::after {
    content: "·";
    margin-left: 0.25em;
  }
  #kulturstandorte > ul {
    margin-block: 2lh;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) and (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
@media only screen and (min-width: 20em) {
  :root {
    --mq: '20';
    --fill: 1em;
  }
  #logo svg {
    width: 10em;
    transform: translateY(-6%);
  }
}
@media only screen and (min-width: 24em) {
  :root {
    --mq: '24';
  }
}
@media only screen and (min-width: 28em) {
  :root {
    --mq: '28';
    --line_thickness: 14;
  }
  header nav {
    gap: 1em;
  }
  #logo svg {
    width: 12em;
    transform: translateY(-10%);
  }
}
@media only screen and (min-width: 36em) {
  :root {
    --mq: '36';
    --fs: 100%;
    --fill: 1lh;
    --pad: 1lh;
  }
  header {
    font-size: var(--fs_l);
  }
  #logo svg {
    transform: translateY(-11%);
  }
  .slides {
    --spd: 1.5em;
  }
  .slides:hover {
    --spd: 2em;
  }
  #newsletter {
    margin-top: 2lh;
  }
}
@media only screen and (min-width: 42em) {
  :root {
    --mq: '42';
  }
  #hero {
    aspect-ratio: 1200/700;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    background-size: auto 100%;
    background-position: right top;
    background-image: url("/files/grfx/ofta_header_artwork_dt.svg");
  }
  #hero .slides {
    width: 56%;
    margin: 0;
  }
  .staircase {
    margin-block: 4lh;
    grid-template-columns: 1fr 1fr;
    gap: 3lh var(--gap);
  }
  .staircase > *:nth-child(odd) {
    margin-top: -2em;
  }
  .staircase > *:nth-child(even) {
    margin-bottom: -2em;
  }
  .staircase + hr {
    margin-block: 3lh;
  }
  .txt_img {
    grid-template-columns: 12fr 15fr;
    margin-bottom: 2lh;
  }
  .txt_img .txt {
    order: -1;
  }
  .txt_img .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .txt_img.all {
    grid-template-columns: 1fr 1fr;
  }
  .item_main {
    margin-block: 2lh;
    grid-template-columns: 1fr 3fr;
  }
  .item_main .copy {
    grid-row: 1;
    grid-column: 2;
  }
  .item_main aside {
    grid-row: 1;
    grid-column: 1;
  }
  #newsletter {
    background-repeat: no-repeat;
    background-size: auto calc(100% - 2 * var(--pad));
    background-position: calc(100% - var(--fill)) center;
  }
  #newsletter > div {
    width: 50%;
    aspect-ratio: 3/2;
  }
  #newsletter h2 {
    margin: 0;
  }
  #newsletter:after {
    content: none;
  }
  #partner, #koop {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
  }
  #partner ul, #koop ul {
    text-align: left;
  }
  #partner img, #koop img {
    display: inline-block;
    max-width: 80%;
  }
  #partner img[src$="theater_strahl.svg"],
  #partner img[src$="himbeer.svg"], #koop img[src$="theater_strahl.svg"],
  #koop img[src$="himbeer.svg"] {
    max-width: 80%;
  }
  #koop img {
    max-width: 60%;
  }
}
@media only screen and (max-width: 43.999em) {
  .js header {
    --hpad: var(--pad);
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4vw;
  }
  .js nav {
    width: initial;
    display: flex;
    flex-direction: row-reverse;
  }
  .js #navicon {
    display: flex;
    position: relative;
    z-index: 100;
  }
  .js #menu {
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    padding: 4em var(--fill) 1em;
    font-size: var(--fs_xl);
    color: var(--white);
    background: var(--black);
    transform: translate(-100%, 0);
    transition: transform 0.4s;
    user-select: none;
  }
  .js #menu a {
    display: flex;
    padding: 2vh 0;
  }
  .js #menu details ul {
    position: static;
    background: inherit;
  }
  .js #menu details a {
    padding-block: 1vh;
  }
  .js #menu details li:first-child:after {
    margin-block: 1vh;
  }
  .js #menu summary {
    padding: 0.5em 0;
  }
  .js #menu summary:after {
    margin-left: 1em;
    width: 1.25em;
    height: 1.25em;
  }
  .js #menu ul {
    padding-inline: var(--fill);
    font-family: var(--ff);
    font-size: var(--fs_l);
  }
  .js #menu ul a {
    text-transform: none;
  }
  .js #navicon[aria-expanded=true] {
    color: var(--white);
  }
  .js #navicon[aria-expanded=true] + #menu {
    transform: translate(0%, 0);
  }
}
@media only screen and (min-width: 44em) {
  :root {
    --mq: '44';
    --pad: 2rem;
    --line_thickness: 16;
  }
  header {
    --hpad: 1em;
    flex-direction: row;
    align-items: start;
    font-size: var(--fs_l);
    gap: 5vw;
  }
  header nav {
    flex-direction: row;
    width: initial;
    margin-left: auto;
  }
  #logo svg {
    width: 10em;
    transform: translateY(-9%);
  }
  #navicon {
    display: none;
  }
  #menu {
    display: flex;
    justify-content: start;
    gap: 1em;
  }
  #menu > li:first-child {
    display: none;
  }
  #menu summary:after {
    content: none;
  }
  #menu a, #menu summary {
    text-underline-offset: 0.1em;
    text-decoration-thickness: 2px;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    transition: color 0.25s, text-decoration-color 0.4s;
  }
  #menu a:hover, #menu summary:hover {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 20%);
  }
  #menu a[aria-current=page] {
    opacity: 0.7;
    text-decoration: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  @keyframes fadein {
    0% {
      transform: translate3d(100%, 0, 0);
    }
    100% {
      transform: translate3d(0%, 0, 0);
    }
  }
  @keyframes fadeout {
    0% {
      transform: translate3d(0%, 0, 0);
    }
    100% {
      transform: translate3d(100%, 0, 0);
    }
  }
  #menu details div {
    position: fixed;
    top: 0;
    right: 200%;
    bottom: 0;
    width: 34%;
  }
  #menu details[open] div {
    right: 0;
  }
  #menu details ul {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min-content;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    margin-block: 0;
    padding: 10vh 2em 4vh 1lh;
    font-size: var(--fs_max);
    color: var(--white);
    background: var(--black);
    user-select: none;
  }
  #menu details ul a {
    display: flex;
    padding: 2vh 0;
    white-space: initial;
    text-decoration: none;
  }
  #menu details li:first-child:after {
    margin-block: 2vh;
  }
  #menu details[open] summary:before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.01);
  }
  #menu details[open] summary:after {
    content: "";
    position: fixed;
    z-index: 10;
    pointer-events: all;
    top: 0;
    right: 0;
    width: 3em;
    height: 3em;
    margin: 0;
    padding: 0;
    background: no-repeat center;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'><path style='stroke:white;stroke-linecap:round;stroke-width:2px' d='m11.69 11.695 20.62 20.61M32.31 11.69 11.69 32.31'/></svg>");
    border: 0;
    outline: 0;
  }
  #menu details[open] summary:focus:after {
    outline: 2px solid rgba(var(--offwhite_rgb), 0.7);
    outline-offset: -4px;
  }
  #menu details[open] ul {
    animation: fadein 0.4s forwards;
  }
  #menu details.closing summary:before, #menu details.closing summary:after {
    opacity: 0;
  }
  #menu details.closing ul {
    animation-name: fadeout;
  }
  main, main [id] {
    scroll-margin-top: 4em;
  }
}
@media only screen and (min-width: 48em) {
  :root {
    --mq: '48';
    --fill: 5vw;
  }
}
@media only screen and (min-width: 56em) {
  :root {
    --mq: '56';
  }
  #logo svg {
    width: 12em;
    transform: translateY(-8%);
  }
  footer {
    padding: var(--pad) 0;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
    align-items: start;
  }
  footer svg {
    transform: translateY(-14%);
  }
  footer ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
  }
  footer ul + ul {
    font-family: var(--ff);
    opacity: 0.9;
  }
  footer ul:nth-of-type(1) li:nth-child(even) {
    width: 50%;
  }
}
@media only screen and (min-width: 64em) {
  :root {
    --mq: '64';
    --fill: 5vw;
    --pad: 2lh;
    --fs: 112.5%;
    --lh: 1.5;
  }
  #partner > div:nth-child(1) ul,
  #partner > div:nth-child(2) ul, #koop > div:nth-child(1) ul,
  #koop > div:nth-child(2) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
  }
  #partner li + li, #koop li + li {
    margin-top: 0;
  }
  #partner > div:nth-child(1) li:nth-child(1), #koop > div:nth-child(1) li:nth-child(1) {
    grid-column: 1/-1;
  }
  #partner > div:nth-child(1) li:nth-child(1) img, #koop > div:nth-child(1) li:nth-child(1) img {
    max-width: 60%;
  }
  #partner img, #koop img {
    display: inline-block;
    max-width: 100%;
  }
  #partner img[src$="theater_strahl.svg"],
  #partner img[src$="himbeer.svg"], #koop img[src$="theater_strahl.svg"],
  #koop img[src$="himbeer.svg"] {
    max-width: 60%;
  }
  #koop img {
    max-width: 75%;
  }
}
@media only screen and (min-width: 80em) {
  :root {
    --mq: '80';
    --fill: 10vw;
  }
}
@media only screen and (min-width: 90em) {
  :root {
    --mq: '90';
  }
}
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background-color: transparent !important;
  }
  body {
    margin: 1cm;
    font: 12pt/1.2 "Helvetica Neue", sans-serif;
  }
  h1 {
    font-size: 125%;
  }
  h2 {
    font-size: 112.5%;
  }
  h3, h4, h5, h6 {
    font-size: 100%;
    margin: 0;
  }
  h2, h3 {
    page-break-after: avoid;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  ul, ol {
    page-break-inside: avoid;
  }
  li {
    margin: 0 0 0 1em;
    padding: 0;
  }
  a, a:visited {
    text-decoration: underline;
  }
  img {
    max-width: 100% !important;
    height: auto;
    page-break-inside: avoid;
  }
  pre, blockquote {
    padding: 1em;
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  hr {
    margin: 2em 0;
    border: 0;
    border-bottom: 1px solid #000;
  }
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  /*
  #divs {
  display : none;
  }
  */
}
.dev body {
  overscroll-behavior: none;
}
.dev body:before {
  content: var(--mq);
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  left: 10px;
  padding: 0.5em 2em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
}
.dev body:after {
  content: counter(w) "x" counter(h);
  counter-reset: h var(--h) w var(--w);
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  right: 10px;
  padding: 0.5em 2em;
  font-size: 75%;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  -webkit-font-smoothing: antialiased;
}