body,
html {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Literata", serif;
  font-weight: var(--access-font-weight);
  color: var(--color-4);
}

body::-webkit-scrollbar {
  display: none;
}



/* Hide scrollbar for IE, Edge and Firefox */

body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

:root {
  /*COLORS*/
  --color-1: #d0dbe0;

  --color-2: #00ff00;

  --color-3: #f2bd8a;

  --color-4: #000;

  --color-5: #f7f7f7;

  --nav: 1.4vw;
  --main-font-weight: 400;
  --h1: 4vw;
  --h2: 30px;
  --h3: 1.4vw;
  --text1: 22px;
  --text2: 18px;
  --text-sidebar: 16px;
  --magazin-text: 1.4vw;
  --magazin-title: 7vw;
  --caption: 14px;
  --line-height-caption: 1.1;
  --line-height-title: 1;
  --line-height-text: 1.4;
  --line-height-table: 1.5;

  /* ACCESSIBILITY  */

  --main-bg-width: calc(100vw - 40px);
  --main-bg-left: 20px;
  --main-bg-right: 20px;
  --main-bg-top: 20px;
  --access-font-weight: 400;
  --link-text-decoration: none;
  --link-color: currentColor;
  --access-button-bg: var(--color-4);
  --access-button-color: var(--color-5);
  --magazine-gutter: url("/assets/img/gitter-04.svg");
  --access-reduce-items: block;

  --text-style-case: uppercase;

  /* FONTS */
  --displayFont: "David Libre", "David-Regular";
  --runningTextFont: "Literata", serif;
}

.preload {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-4);
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preload-content {
  position: fixed;
  width: calc(100vw - 20px);
  height: 100vh;
  background-color: var(--color-4);
  z-index: 20;
  display: flex;
  justify-content: center;
}

.loader {
  border: 16px solid var(--color-5);
  border-radius: 50%;
  border-top: 16px solid var(--color-3);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* TEXT SELCTION */

div.vbox-content,
div.vbox-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
  padding-right: 0 !important;
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--color-4);
  background: var(--color-2);
}

::selection {
  color: var(--color-4);
  background: var(--color-2);
}

div.sidebar-content ::selection {
  color: var(--color-4);
  background: var(--color-1);
}

div.sidebar-content::-moz-selection {
  color: var(--color-4);
  background: var(--color-1);
}

#content #archive-header ::selection {
  color: var(--color-4);
  background: var(--color-1);
}

#content #archive-header::-moz-selection {
  color: var(--color-2);
  background: var(--color-1);
}

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

a {
  color: var(--link-color);
  text-decoration: var(--link-text-decoration);
  outline: 0;
}

p a {
  text-decoration: underline;
  pointer-events: all;
}

ul {
  list-style-type: none;
}

h1,
h2,
h3 {
  font-weight: 200;
  line-height: 1;
}

h1 {
  font-size: var(--h1);
}

h3 {
  font-size: var(--h3);
}

/* MENU */

#mobile-menu {
  display: none;
}

#menu {
  bottom: 0;
  position: fixed;
  display: flex;
  flex-direction: row;
  width: 95vw;
  right: 0;
  z-index: 20;
  align-items: flex-end;
}

#menu a {
  color: var(--color-4);
  text-decoration: none;
}

.site-title {
  background: var(--color-3);
  width: 40vw;
  height: max(50px, 8vh);
  bottom: 0;
  position: fixed;
  -webkit-box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.8);
  z-index: 30;
  font-family: var(--displayFont);
  font-size: var(--h1);
  text-transform: var(--text-style-case);
  display: flex;
  justify-content: center;
  align-items: center;
}

#site-language {
  background: var(--color-2);
  font-family: var(--displayFont);
  font-size: var(--nav);
  text-transform: var(--text-style-case);
  display: flex;
  align-items: center;
  white-space: wrap;
}

#site-language > span:first-child a:after {
  content: "/ ";
}

.language-note {
  font-style: italic;
  color: var(--color-3);
  padding: 0 10px;
  pointer-events: none;
}

.site-logo {
  bottom: -4px;
  margin: 0;
  padding: 0;
  left: 0;
  position: fixed;
  height: 255.1px;
  width: 198px;
  z-index: 15;
}

.site-logo img {
  height: 255.1px;
  width: 198px;
  -webkit-box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
}

#site-language {
  width: 6vw;
  right: 0;
  bottom: 0;
  height: 50px;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  display: block;
  position: fixed;
  width: 49vw;
  height: 50px;
  background: var(--color-1);
  right: 6vw;
  -webkit-box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.6);
  box-shadow: 10px 0px 15px -2px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

nav ul {
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-family: var(--displayFont);
  text-transform: var(--text-style-case);
  font-size: var(--nav);
}

/* PAGES */

.page-title {
  font-family: var(--displayFont);
  line-height: var(--line-height-title);
  padding: 10px 10px 40px 10px;
}

/* SWUP */
.transition-fade {
  transition: 0.1s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

.transition-fade-slow {
  transition: 0.7s;
  opacity: 1;
}

html.is-animating .transition-fade-slow {
  opacity: 0;
}

.transition-swipe {
  transition: 2s;
  transform: translateY(0%);
}

html.is-animating .transition-swipe {
  transform: translateY(100%);
}

#stage-image {
  object-fit: cover;
  z-index: -10;
  position: fixed;
  min-width: 100vw;
  min-height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* OVERLAY */
main {
  background-color: var(--color-5);
  pointer-events: none;
  position: fixed;
  width: var(--main-bg-width);
  left: var(--main-bg-left);
  right: var(--main-bg-right);
  top: var(--main-bg-top);
  padding: 0px;
  bottom: -100vh !important;
  height: 95vh;
  z-index: 15;
}
main#swup.home {
  background-color: transparent;
}

#content {
  height: 100vh;
  pointer-events: all;
  overflow-x: auto;
  width: var(--main-bg-width);
  margin: 0px;
  left: 0;
  padding-bottom: 100px;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#content::-webkit-scrollbar {
  display: none;
}

#overlay {
  background-color: var(--color-5);
  position: fixed;
  left: 20px;
  bottom: -100vh;
  width: calc(100vw - 40px);
  height: calc(100vh - 20px);
  z-index: 10;
  display: block;
}

#close {
  position: fixed;
  display: none;
  height: 30px;
  width: 30px;
  margin: 0;
  pointer-events: all !important;
  z-index: 50;
  top: 25px;
  right: 25px;
  cursor: pointer;
}

#close::before,
#close::after {
  position: absolute;
  top: 14px;
  right: 0;
  content: "";
  width: 100%;
  height: 2px; /* cross thickness */
  background-color: var(--color-4);
}

#close::before {
  transform: rotate(45deg);
}

#close::after {
  transform: rotate(-45deg);
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  width: 100vw;
  bottom: 100px;
  height: calc(100vh - 70px);
}

main.home {
  pointer-events: none;
}

.rnd-img-1 {
  display: var(--access-reduce-items);
  grid-area: 4 / 3 / 7 / 7;
  z-index: 0;
  -webkit-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  pointer-events: all;
}

.rnd-img-caption-1 {
  padding: 10px;
  grid-area: 4 / 3 / 7 / 7;
  z-index: 10;
  background: var(--color-3);
  pointer-events: none;
}

.rnd-img-2 {
  display: var(--access-reduce-items);
  pointer-events: all;
  grid-area: 1 / 6 / 3 / 10;
  z-index: 0;
  height: auto;
  -webkit-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
}

.rnd-img-caption-2 {
  padding: 10px;
  pointer-events: none;
  grid-area: 1 / 6 / 3 / 10;
  z-index: 10;
  background: var(--color-3);
}

.rnd-img-3 {
  display: var(--access-reduce-items);
  pointer-events: all;
  grid-area: 3 / 14 / 7 / 23;
  z-index: 0;
  height: auto;
  -webkit-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
}

.rnd-img-caption-3 {
  padding: 10px;
  pointer-events: none;
  grid-area: 3 / 14 / 7 / 23;
  z-index: 200;
  background: var(--color-3);
}

.rnd-img-4 {
  display: var(--access-reduce-items);
  pointer-events: all;
  grid-area: 5 / 11 / 7 / 17;
  z-index: 5;
  -webkit-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 41px -8px rgba(0, 0, 0, 0.75);
}

.rnd-img-caption-4 {
  padding: 10px;
  pointer-events: none;
  grid-area: 5 / 11 / 7 / 17;
  z-index: 10;
  background: var(--color-3);
}

.rnd-img-2 img,
.rnd-img-1 img,
.rnd-img-3 img,
.rnd-img-4 img {
  display: var(--access-reduce-items);
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: all;
}

.rnd-img-caption-1,
.rnd-img-caption-2,
.rnd-img-caption-3,
.rnd-img-caption-4 {
  display: none;
}

/* ACCESSIBILITY */

div.accessibility {
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  width: 350px;
  height: 400px;
  background-color: var(--color-3);
  bottom: -310px;
  right: 6vw;
  z-index: 20;
  cursor: pointer !important ;
  padding: 0 20px;
  -webkit-box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.8);
  transition: bottom 0.5s ease-in-out;
}

.access-title {
  font-size: var(--h2);
  font-family: var(--displayFont);
  text-transform: var(--text-style-case);
  padding: 3px;
  cursor: pointer;
  height: 40px;
}
.accessibility button {
  border: 0px;
  width: 100%;
  padding: 5px;
  cursor: pointer;
  margin: 5px 0;
  color: var(--color-4);
}

.font-size-label {
  width: 100%;
  text-align: center;
}
.access-font-sizer {
  width: 310px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.access-font-sizer button {
  width: 150px;
}
.access-font-sizer button:active {
  background-color: var(--access-button-bg);
  color: var(--access-button-color);
}

button#access-reset-font-size:active {
  background-color: var(--access-button-bg);
  color: var(--access-button-color);
}

button.access-active {
  background-color: var(--access-button-bg);
  color: var(--access-button-color);
}

.reduce-background {
  width: 100vw !important;
  left: 0px !important;
  height:100vh !important;
}

/* ARCHIVE */

#archive-header {
  display: flex;
  flex-direction: row;
  pointer-events: none;
}
#resultTable {
  width: calc(100vw - 40px);
  padding: 40px 10px 0 10px;
  display: flex;
  flex-direction: column;
  border-collapse: collapse;
  border-spacing: 0px;
}

tr {
  height: 50px;
}
thead tr {
  width: calc(100vw - 40px);
}

#resultTable thead {
  width: calc(100vw - 60px);
  text-align: left;
}

#resultTable td {
  border-bottom: 1px solid var(--color-4);
}

#resultTable span,
.td-programme,
.td-date,
.td-format,
.td-title {
  border-collapse: collapse;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.td-date,
.td-format,
.td-programme,
.table-like__item .format,
.table-like__item .date,
.table-like__item .program {
  width: calc(50vw / 3);
}

.mobile-table-title {
  display: none;
}

/* ---- table-like ---- */

.table-like {
  list-style: none;
}

/* clear fix */
.table-like:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- vertical table-like ---- */

.table-like__item {
  width: calc(100% - 20px);
  margin: 10px 10px;
  clear: both;
  border-top: 1px solid;
}

.table-like__item > * {
  display: inline-block;
  padding: 10px 0px;
  font-size: 18px;
  line-height: 1.5;
  font-family: var(--runningTextFont);
}

.button-group {
  padding: 40px 0 20px 0;
}

button.td-date {
  margin-left: 10px;
}
.td-title,
.table-like__item .title {
  width: calc(40vw - 40px);
}

.sorting {
  font-family: var(--displayFont);
  font-size: var(--h3);
  font-weight: 100;
}

input.js-search {
  display: inline-block;
  height: calc((var(--h3) * 2) + 20px);
  border: none;
  background: var(--color-2);
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  width: calc(50vw - 30px);
  padding-left: 10px;
  pointer-events: all;
  font-family: var(--displayFont);
  font-size: var(--h1);
}

.text-field-position {
  position: relative;
}

.text-field-position span {
  position: absolute;
  right: 0;
  font-size: 6rem;
  top: 0;
  bottom: 0;
  line-height: calc((var(--h3) * 2));
  pointer-events: all;
}

input:active,
input:focus {
  outline: none;
}

/* clears the 'X' from Internet Explorer */
input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-4);
  opacity: 1; /* Firefox */
  text-transform: var(--text-style-case);
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--color-4);
  text-transform: var(--text-style-case);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--color-4);
  text-transform: var(--text-style-case);
}

/* TAGS */

#mobile-tags .arrow,
#mobile-tags {
  display: none;
}
.tag-container {
  display: flex;
  height: calc((var(--h3) * 3) + 32px);
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: 0px;
  flex-wrap: wrap;
  line-height: 2;
  width: calc(50vw - 50px);
}

.tagslist {
  pointer-events: all;
  text-transform: var(--text-style-case);
  pointer-events: all;
  font-family: var(--displayFont);
  font-size: var(--h3);
}

.tagslist li {
  list-style-type: none;
}
a.tagslist {
  display: flex;
  flex-direction: row;
  background: var(--color-2);
  margin-left: 5px;

  line-height: calc(var(--h3) + 8px);
}

a#active.tagslist {
  background: var(--color-1);
}
.close-x:after {
  content: "\00a0\✕";
  white-space: nowrap;
  font-size: 1rem;
  color: var(--color-4);

  height: 10px;
  pointer-events: all;
}

a.close-no-bg {
  background-color: none !important;
  background: none;
  line-height: 1.8;
}

/* ARCHIVE CONTENT */

.article-container {
  width: calc(100vw - 40px);
  display: flex;
  flex-direction: row;
  overflow-y: auto;
  pointer-events: all;
}
.main-content {
  width: calc(((100vw - 60px) / 3) * 2);
  padding: 10px;
  overflow-y: auto;
  pointer-events: all;
  z-index: 5;
  height: calc(100vh - 70px);
  padding-bottom: 30vh;
  font-size: var(--text1);
  line-height: var(--line-height-text);
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.main-content::-webkit-scrollbar {
  display: none;
}

.main-content p {
  padding-bottom: 20px;
}

.main-content img {
  width: calc(((100vw - 300px) / 3) * 2);
}

.sidebar-title {
  font-family: var(--displayFont);
}

.sidebar-content {
  font-size: var(--text-sidebar);
  padding: 10px;
  width: calc(100vw / 3);
  background: var(--color-2);
  height: calc(100vh - 70px);
  z-index: 5;
  overflow-y: auto;
  pointer-events: all;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  padding-bottom: 20vh;
}

.sidebar-content::-webkit-scrollbar {
  display: none;
}

.sidebar-content p {
  padding-bottom: 20px;
}

.sidebar-content p:last-child {
  padding-bottom: 0;
}

.sidebar-content a {
  text-decoration: underline;
}

div.main-content a {
  pointer-events: all;
  text-decoration: none;
}

.breadcrumb {
  margin-bottom: 20px;
  font-family: var(--displayFont);
  font-size: var(--h3);
}

.breadcrumb a {
  display: flex;
  align-items: center;
}

.breadcrumb svg {
  height: 15px;
  padding-right: 10px;
}

.lightbox {
  display: flex;
  flex-direction: column;
  padding: 0 0 80px 0;
}

.lightbox img:not(:first-child) {
  display: none;
}

.preload-lightbox {
  width: calc(((100vw / 3) * 2) + 30px );
  height: calc(100vh);
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: black;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gall-wrapper {
  display: none;
  flex-direction: row;
}

.gall-caption {
  padding-top: 2px;
  width: calc(((100vw / 3) * 2) - 200px);
  font-size: var(--caption);
  line-height: var(--line-height-caption);
}

.gall-wrapper img {
  object-fit: cover;
}

img {
  max-height: 90vh;
}

.vbox-item {
  cursor: pointer;
}

.load-more {
  background: var(--color-2);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3px;
  margin-left: 10px;
  height: 30px;
  width: 30px;
  align-self: flex-end;
  cursor: pointer;
}


.vbox-title {
  white-space: normal !important;
  line-height: 1.5 !important;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
}

iframe.responsive-iframe > body img {
  height: 50%;
}

.iframecontainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* CAROUSEL */
.carousel {
  background: var(--color-2);
}

.swiper {
  width: 100%;
  height: 30vw;
  padding: 0;
  margin: 80px 0;

}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: var(--color-2);
  display: flex !important;


}


.carousel-captions {
  padding-top: 0px;
  padding-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% ;
  top: 35vh;
  position: absolute;
  font-size: var(--caption);
  line-height: var(--line-height-caption);
}

.swiper-slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-4);
  z-index: 10000000;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
  z-index: 10000000;
}

/* ABOUT */

#text-content {
  padding: 10px;
}
#text-content p {
  font-size: var(--text2);
  padding-bottom: 20px;
}
.imprint h3,
.imprint h4,
.disclaimer h3,
.disclaimer h4,
.privacy h3,
.privacy h4 {
  font-weight: 600;
  line-height: 2;
}

/* SUPPORT */

.logo-img,
.logo-img figure {
  width: 20vw;
  height: auto;
  margin-right: 10px;
  object-fit: contain;
}

.logo-img img {
  object-fit: cover;
}

.logo-wrapper {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
}

.support h2:not(:first-child) {
  margin-top: 20px;
}
/* MAGAZIN */

.magazin-title-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#dl-magazin {
  font-size: var(--text1);
  background-color: var(--color-2);
  height: auto;
  z-index: 10000;
  margin: 0 0 20px 10px;
  padding: 5px 10px 8px 10px;
  cursor: pointer;
}

#magazin-close {
  position: fixed;
  height: 30px;
  width: 30px;
  margin: 0;
  pointer-events: all !important;
  top: 25px;
  right: 25px;
  cursor: pointer;
  z-index: 500 !important;

}

#magazin-close::before,
#magazin-close::after {
  position: absolute;
  top: 14px;
  right: 0;
  content: "";
  width: 100%;
  height: 2px; /* cross thickness */
  background-color: white;
}

#magazin-close::before {
  transform: rotate(45deg);
}

#magazin-close::after {
  transform: rotate(-45deg);
}
#magazin-swup {
  width: 100vw;
  height: 100vh;
  top: 0vh;
  left: 0;
  padding: 20px calc(15vw + 100px);
  color: var(--color-4);
  position: fixed;
  z-index: 300 !important;
  background-color: transparent;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.magazin-swup::-webkit-scrollbar {
  display: none;
}

.magazin-scroll {
  width: 100vw;
  height: 100vh;
  top: 0vh;
  left: 0;
  padding: 20px calc(15vw + 100px);
  color: var(--color-4);
  position: fixed;
  z-index: 300 !important;
  background-color: transparent;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.magazin-scroll::-webkit-scrollbar {
  display: none;
}

#magazin-load {
  width: calc(100vw - 80px);
  overflow-x: hidden;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;

  pointer-events: all;
}
.magazin-fg {
  background-color: var(--color-5);
  opacity: 1;
  width: 70vw;
  height: 100vh;
  position: fixed;
  top: 0vh;
  left: 15vw;
  z-index: 150;

  pointer-events: all;
}
.magazin-bg {
  background-color: var(--color-4);
  opacity: 0.8;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0;
  margin: 0;
  pointer-events: all;
}

.magazin-title {
  font-size: var(--magazin-title);
  font-style: italic;
  padding: 20px 0 60px 0;
  text-align: center;
}
.magazin-author-preview {
  white-space: wrap;
}

.magazin-author-preview p:after {
  content: ":";
}

.magazin-author {
  padding: 80px 0 20px 0;
  font-size: var(--magazin-text);
  z-index: 1000;
}

.language-note-magazin {
  font-style: italic;
  color: var(--color-3);
  padding: 40px 10px 0px 10px;
  z-index: 1000;
  position: relative;
  font-size: var(--text1);
  pointer-events: none;
}
.magazin-article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.magazin-article {
  font-size: var(--magazin-text);
  text-align: left;
}
.magazin-article p {
  text-align: left;
  width: calc(70vw - 200px);
}
.magazin-article img {
  padding: 20px 0;
}

.magazin-article figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.magazin-article figcaption {
  font-style: italic;
  font-size: 18px;
  text-align: center;
  padding: 0 80px 40px 80px;
  width: calc(70vw - 200px);
}

.magazin-article p {
  padding-bottom: 10px;
}

h2 {
  font-size: var(--h2);
  padding-bottom: 20px;
  font-weight: 500;
}

.magazin-article h2 {
  margin: 3vw 0 3vw 0;
  text-align: center;
}

.magazin-article h3 {
  font-size: 2vw;
  margin: 3vw 0 3vw 0;
  font-weight: bold;
  text-align: center;
}

.magazin-article:last-of-type {
  padding-bottom: 40vh;
}

.magazin-title,
.magazin-author,
.magazin-article,
#magazin-close {
  color: var(--color-4);
}

.magazin-title,
.magazin-author,
.magazin-article {
  z-index: 100000 !important;
}

#magazin-close {
  z-index: 100001 !important;
}

#magazin-content {
  width: calc(100%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px 0;
}

.magazin-item {
  text-align: center;
  width: calc((100vw - 40px) / 4);
  padding: 10px;
  height: 150px;
  cursor: pointer;
  font-family: var(--displayFont);
}
#magazine-gutter {
  width: var(--main-bg-width);
  height: 95vh;
  background-image: var(--magazine-gutter);
  background-size: var(--main-bg-width);
  background-repeat: repeat;
  position: absolute;
  top: 0px;
  pointer-events: none;
}

#magazin-content a:nth-child(1n + 1) {
  -moz-transform: skew(0deg, -13deg);
  -o-transform: skew(0deg, -13deg);
  -webkit-transform: skew(0deg, -13deg);
  transform: skew(0deg, -13deg);
  writing-mode: lr-tb;
}

#magazin-content a:nth-child(2n + 2) {
  -moz-transform: skew(0deg, 13deg);
  -o-transform: skew(0deg, 13deg);
  -webkit-transform: skew(0deg, 13deg);
  transform: skew(0deg, 13deg);
  writing-mode: lr-tb;
}

#magazin-content a:nth-child(4n + 3) {
  -moz-transform: skew(0deg, -6.05deg);
  -o-transform: skew(0deg, -6.05deg);
  -webkit-transform: skew(0deg, -6.05deg);
  transform: skew(0deg, -6.05deg);
  writing-mode: lr-tb;
}

#magazin-content a:nth-child(4n + 4) {
  margin-top: -32px;
  -moz-transform: skew(0deg, -6.05deg);
  -o-transform: skew(0deg, -6.05deg);
  -webkit-transform: skew(0deg, -6.05deg);
  transform: skew(0deg, -6.05deg);
  writing-mode: lr-tb;
}

#magazin-content a {
  -moz-transform: skew(0deg, -6.05deg);
  -o-transform: skew(0deg, -6.05deg);
  -webkit-transform: skew(0deg, -6.05deg);
  transform: skew(0deg, -6.05deg);
}

.sidebar-item {
  padding-bottom: 20px;
}

.sidebar-item h3 {
  text-align: left;
  margin: 0;
  font-weight: 200;
}

.break::after {
  content: "\a";
  white-space: pre;
}

.break:last-child::after {
  content: "";
  white-space: wrap;
}

.arrow :not(p):not(em):not(u):before {
  content: url("/assets/img/arrow.svg");
  width: 20px !important;
  display: inline-block;
}

.arrow :not(p):not(em):not(u):after {
  content: "\a";
  white-space: pre-wrap;
}

.arrow p {
  padding: 0px;
}

/* PARTICIPANTS */

.columns {
  -webkit-column-count: 4; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 4; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 4; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
  margin-bottom: 15vh;
}

.columns h2:not(:first-child) {
  margin-top: 20px;
}

.columns h3 {
  margin: 10px 0 0 0;
  font-style: italic;
}

.columns h2 {
  font-family: var(--displayFont);
  font-size: var(--h2);
}

iframe {
  border: none;
}

.consent__container {
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.consent__container::before {
  display: block;
  content: "";
  padding-bottom: 56.25%;
  width: 0;
  height: 0;
}

.video-container {
  padding: 5% 0 5% 0;
}

.video-container figure {
  width: 100%; 
}

.video-aspect-ratio {
  width: calc(70vw - 200px);
  height: calc((70vw - 200px) * 0.5625);
  cursor: pointer;
}

.video-aspect-ratio>* {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.video-container iframe {
  border: 0;
  background: var(--color-black);            
}

.video-container figcaption {
  width: calc(70vw - 200px);
  margin-top: 1vh;
  margin-bottom: 0;
  padding: 0;
}

.pdf-container {
  padding: 5vh 0 5vh 0;
}

.pdf-container figure {
  width: 100%; 
}

.pdf-aspect-ratio {
  width: calc(70vw - 200px);
  height: calc((70vw - 200px) * 1.4142);
  cursor: pointer;
}

.pdf-aspect-ratio>* {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.pdf-container iframe {
  border: 0;
  background: var(--color-black);     
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0px !important;            
  
}

.pdf-container div {
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.consent__notice {
  font-family: var(--displayFont);
  font-size: var(--caption);
  background: var(--color-3);  
  text-align: left;
  padding: 0.75em 1em 1em 2.5em;
  width: 100%;
  margin-top: auto;
  -webkit-box-shadow: 0px -10px 10px -10px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px -10px 10px -10px rgba(0, 0, 0, 0.6);
  box-shadow: 0px -10px 10px -10px rgba(0, 0, 0, 0.8);
}

.consent__notice > * {
  margin-top: 0;
  margin-bottom: 0;
}

.consent__notice > * + * {
  margin-left: 2em;
}

.consent__notice p {
  padding-left: 2em;
  width: 100%;
}

.consent__notice a:focus,
.consent__notice a:hover {
  color: var(--color-2);
}

.consent__notice button {
  font-family: var(--displayFont);  
  font-size: 1em;
  padding: 0.25rem 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  background-color: var(--color-2);
  box-sizing: border-box; 
  text-rendering: geometricprecision;
}

.consent__notice button:focus,
.consent__notice button:hover {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.consent__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.consent__iframe:not([src]) {
  display: none;
}

.consent__iframe[src] + .consent__notice {
  display: none;
}

@media only screen and (max-width: 1000px) {
  :root {
    --nav: 3vw;
    --main-font-weight: 400;
    --h1: 6vw;
    --h2: 4vw;
    --h3: 3vw;
    --text1: 20px;
    --text2: 18px;
    --magazin-text: 3vw;
    --magazin-title: 8vw;
    --caption: 14px;
    --line-height-caption: 1.1;
    --line-height-title: 1;
    --line-height-text: 1.4;
    --line-height-table: 1.5;
  }

  /* MENU */

  #mobile-menu {
    position: fixed;
    display: inline-block;
    cursor: pointer;
    right: 0;
    top: 0;
    width: 10vw;
    height: 7.5vh;
    background-color: var(--color-1);
    padding: 1vh 0;
    z-index: 100;
  }

  .bar {
    width: 8vw;
    height: 0.5vh;
    background-color: var(--color-4);
    margin: 1vh 1vw;
    transition: 0.4s;
  }

  .change .bar:nth-child(1) {
    width: 50%;
    -webkit-transform: translateY(1.5vh) rotate(-45deg);
    transform: translateX(37%) translateY(1.5vh) rotate(-45deg);
  }

  .change .bar:nth-child(2) {
    opacity: 0;
  }

  .change .bar:nth-child(3) {
    width: 50%;
    -webkit-transform: translateY(-1.5vh) rotate(45deg);
    transform: translateX(37%) translateY(-1.5vh) rotate(45deg);
  }

  .site-title {
    top: 0;
    left: 0;
    padding-left: 10px;
    width: 90vw;
    height: 7.5vh;
    bottom: auto;
    justify-content: flex-start;
    align-items: center;
    z-index: 20;
  }

  .site-title h1 {
    font-size: 5.5vw;
    font-weight: 400;
  }  

  #site-language {
    width: 100vw;
    right: auto;
    bottom: auto;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: transparent;
  }

  nav {
    position: fixed;
    width: 100vw;

    background: var(--color-1);
    top: -100vh;
    right: 0;
    display: block;
    bottom: 0;

    padding: 20vh 0;
    height: 100vh;
    align-items: center;
    z-index: 10;
  }

  nav ul {
    line-height: 2;
    height: 50vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  /* ACCESSIBILITY  */

  div.accessibility {
    width: 300px;
    height: 400px;

    bottom: -370px;

    padding: 0 10px;
    margin: 0;
  }

  .access-title {
    font-size: 1.5em;
    font-family: var(--displayFont);
    text-transform: var(--text-style-case);
    padding: 0px;
    cursor: pointer;
    height: 35px;
  }
  .accessibility button {
    border: 0px;
    width: 100%;
    padding: 5px;
    cursor: pointer;
    margin: 5px 0;
  }

  .font-size-label {
    width: 90%;
    text-align: center;
  }
  .access-font-sizer {
    width: 280px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .access-font-sizer button {
    width: 135px;
  }

  h1 {
    font-weight: 400;
  }

  .magazin-article h1 {
    font-size: var(--h1);
  }

  .magazin-article h2 {
    font-size: 5vw;
  }

  .magazin-article h3 {
    font-size: 4vw;
  }

  /* LANDINGPAGE */

  .container {
    bottom: 0;
    height: 100vh;
  }
  .rnd-img-1 {
    display: none;
  }

  .rnd-img-caption-1 {
    display: none;
  }

  .rnd-img-2 {
    grid-area: 2 / 5 / 4 / 11;
  }

  .rnd-img-caption-2 {
    grid-area: 2 / 5 / 4 / 11;
  }

  .rnd-img-3 {
    grid-area: 3 / 13 / 7 / 24;
  }

  .rnd-img-caption-3 {
    grid-area: 3 / 13 / 7 / 24;
  }

  .rnd-img-4 {
    grid-area: 5 / 11 / 7 / 17;
  }

  .rnd-img-caption-4 {
    grid-area: 5 / 11 / 7 / 17;
  }
  /* MAIN */

  /* OVERLAY */
  main {
    background-color: var(--color-5);
    left: 0;
    top: 7.5vh;
    padding: 0px;
    bottom: -100vh !important;
    height: 92.5vh;
    z-index: 15;
    width: 100vw;
  }

  main#swup.home {
    background-color: transparent;
  }
  #content {
    height: 100vh;
    pointer-events: all;
    overflow-x: auto;
    width: 100vw;
    margin: 0 px;
    left: 0;
    padding-bottom: 40vh;
  }
  /* PAGES */
  #close {
    display: none;
  }
  /* SWUP */

  /* OVERLAY */
  #overlay {
    right: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-5);
  }

  .preload-lightbox {
    width: calc(((100vw / 3) * 2) );
    height: calc(100vh);
    position: fixed;
    top: 0px;
    left: 0px;

  }

  /* ARCHIVE */

  .main-content {
    width: calc((100vw / 3) * 2);
    padding: 10px;
  }

  .article-container {
    width: 100vw;
  }

  .button-group {
    padding: 10px 0 20px 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .table-like__item {
    display: flex;
    flex-direction: column-reverse;

    align-items: center;
    width: calc(100vw - 20px);
    margin: 0 10px;
  }

  .table-like {
    width: 100vw;
    overflow-x: hidden;
  }

  .sorting {
    padding: 10px !important;
    margin: 0 !important;

    display: block;
    text-align: left;
    font-family: var(--displayFont);
    font-size: var(--h3);
    font-weight: 100;
  }
  .is-checked {
    background: var(--color-2) !important;
  }

  button.sorting {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;

    font-size: var(--h3);
  }

  svg.sorting-arrow {
    display: none;
  }

  /* SIDEBAR */

  .sidebar-title {
    font-family: var(--displayFont);
  }

  .sidebar-content {
    width: calc(100vw / 3);
    height: calc(100vh - 7.5vh);
  }

  .breadcrumb {
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: var(--displayFont);
    font-size: var(--h3);
  }

  .breadcrumb a {
    display: flex;
    align-items: center;
  }

  .breadcrumb svg {
    height: 15px;
    padding-right: 10px;
  }
  /* TAGS */

  .close-x:after {
    content: "Auswahl aufheben \00a0\✕";
    white-space: nowrap;
    font-size: 1rem;
    color: var(--color-4);
    padding-left: 10px;
    border-top: 1px solid var(--color-4);
    height: 10px;
    pointer-events: all;
  }

  #archive-header {
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }

  #mobile-tags {
    pointer-events: all;
    z-index: 1000;
    font-family: var(--displayFont);
    position: relative;
    padding-left: 10px;
    width: 100vw;
    height: 7.5vh;
    background-color: var(--color-1);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  #mobile-tags .arrow {
    margin-top: -0.5vw;
    margin-right: 20px;
    width: 5vw;
    height: 5vw;
    border: solid var(--color-4);
    border-width: 0 4px 4px 0;
    display: inline-block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .tag-container {
    display: block;
    left: 0;
    align-items: center;
    z-index: 1000;
    flex-wrap: wrap;
    line-height: 3;
    width: 100vw;
    height: auto;
  }
  a.tagslist {
    margin-left: 0;
    left: 0;
    background-color: var(--color-2);
    width: 100vw;
    margin-left: 0px;
    padding-left: 10px;
    top: 15vh;
    line-height: calc(var(--h3) + 8px);
  }

  div.close.close-x {
    width: 100vw;
    background-color: var(--color-2);
  }
  /* SEARCH */
  input.js-search {
    height: 7.5vh;
    width: 100vw;
  }

  .text-field-position span {
    position: absolute;
    right: 0;
    font-size: 5rem;
    top: 0;
    bottom: 0;
    line-height: 5vh;
    pointer-events: all;
  }

  /* ARCHIVE CONTENT */
  .td-date,
  .date,
  .td-format.format,
  .format,
  .td-programme.program,
  .program,
  .td-title,
  .name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 0;
    width: calc(100vw);
    padding: 0;
  }

  .td-date a,
  .date a,
  .td-format.format a,
  .td-programme a,
  .program a,
  .td-title a,
  .name a {
    width: 70vw;
    margin: 2px 0 2px 10px;
  }

  .td-date a {
    margin: 2px 0 10px 10px;
  }

  .td-title a {
    margin: 10px 0 2px 10px;
  }
  .mobile-table-title {
    display: flex;
    align-items: center;
    min-width: 30vw;
    margin-left: 10px;
    border-right: 1px solid var(--color-4);
  }

  /* CAROUSEL */

  .swiper {
    height: 40vw;
  }

  .carousel-captions {
    padding-top: 0px;
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% ;
    top: 35vh;
    position: absolute;
    font-size: var(--caption);
    line-height: var(--line-height-caption);
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--color-4);
    z-index: 10000000;
  }


    .swiper-button-next::after {
      content: url("data:image/svg+xml,%3Csvg width='40' height='60' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cpolyline points='10 10 30 30 10 50' stroke='black' stroke-width='4' stroke-linecap='butt' fill='none' stroke-linejoin='round'%3E<%3C/polyline%3E%3C/svg%3E");
   
      z-index: 10000000;

    }
    .swiper-button-prev::after {
      content: url("data:image/svg+xml,%3Csvg width='40' height='60' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cpolyline points='30 10 10 30 30 50' stroke='black' stroke-width='4' stroke-linecap='butt' fill='none' stroke-linejoin='round'%3E>%3C/polyline%3E%3C/svg%3E");
      z-index: 10000000;

    }
    
  /* ABOUT */

  /* SUPPORT */

  .logo-img,
  .logo-img figure {
    width: calc(100vw - 20px);
    height: auto;
    margin-right: 10px;
    object-fit: contain;
  }

  .logo-img img {
    object-fit: cover;
  }

  .logo-wrapper {
    display: flex;
    flex-direction: row;
    padding-bottom: 20px;
  }

  /* MAGAZIN */

  .magazin-title-wrapper {
    width: 100vw;
    padding: 0 10px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #dl-magazin {
    font-size: 4vw;
    background-color: var(--color-2);
    height: auto;
    z-index: 10000;
    margin: 0 0 20px 10px;
    padding: 5px 10px 8px 10px;
    cursor: pointer;
  }

  .magazin-scroll {
    padding: 20px 40px;
    overflow-x: hidden;
    width: 100vw;
  }

  #magazin-close {
    height: 50px;
    width: 50px;
    top: 40px;
    right: 30px;
    z-index: 1000000000 !important;
  }

  #magazin-close::before,
  #magazin-close::after {
    background-color: var(--color-4);
  }

  #magazin-swup {
    padding: 20px 40px;
  }

  .magazin-fg {
    width: calc(100vw - 40px);
    left: 20px;
  }

  .magazin-title {
    font-size: var(--magazin-title);
    font-style: italic;
    padding: 20px 0 60px 0;
    text-align: center;
  }

  .magazin-author {
    padding: 80px 0 20px 0;
    font-size: var(--magazin-text);
  }

  .magazin-article figcaption {
    font-size: 18px;
    margin-bottom: 40px;
    width: 80vw;
  }

  .magazin-article p {
    padding-bottom: 10px;
  }

  .magazin-article p {
    text-align: left;
    width: calc(100vw - 100px);
  }
  .magazin-article:last-of-type {
    padding-bottom: 40vh;
  }

  #magazin-content {
    width: calc(100%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 0;
  }

  .magazin-item {
    width: calc((100vw - 40px) / 2);
  }

  #magazine-gutter {
    width: 100vw;
    height: 92.5vh;

    background-size: calc(200vw);
  }

  #magazin-content a:nth-child(1n + 1) {
    -moz-transform: skew(0deg, -13deg);
    -o-transform: skew(0deg, -13deg);
    -webkit-transform: skew(0deg, -13deg);
    transform: skew(0deg, -13deg);
    writing-mode: lr-tb;
  }

  #magazin-content a:nth-child(2n + 2) {
    -moz-transform: skew(0deg, 13deg);
    -o-transform: skew(0deg, 13deg);
    -webkit-transform: skew(0deg, 13deg);
    transform: skew(0deg, 13deg);
  }

  /* PARTICIPANTS */
  .columns {
    -webkit-column-count: 2; /* Saf3, Chrome*/
    -webkit-column-gap: 4%; /* Saf3, Chrome*/
    -moz-column-count: 2; /* FF3.5+ */
    -moz-column-gap: 4%; /* FF3.5+ */
    column-count: 2; /* Opera 11+*/
    column-gap: 4%; /* Opera 11+*/
  }

  .video-aspect-ratio {
    width: calc(100vw - 40px);
    height: calc((100vw - 40px) * 0.5625);
  }

  .video-container figcaption {
    width: calc(100vw - 40px);
  }

  .pdf-aspect-ratio {
    width: calc(100vw - 100px);
    height: calc((100vw - 100px) * 1.4142);
  }

  .pdf-container div {
    width: calc(100vw - 100px);
  }  
}

@media only screen and (max-width: 900px) {
  #mobile-tags {
    align-items: center;
  }

  #mobile-tags .arrow {
    margin-top: -2.5vw;
    width: 5vw;
    height: 5vw;
  }

  .vbox-title {
    white-space: normal !important;
    line-height: 1.5 !important;
  }  
}

@media only screen and (max-width: 700px) {
  :root {
    --nav: 6vh;
    --main-font-weight: 400;
    --h1: 8vw;
    --h2: 6vw;
    --h3: 5vw;
    --text1: 22px;
    --text2: 18px;
    --magazin-text: 4vw;
    --magazin-title: 8vw;
    --caption: 14px;
    --line-height-caption: 1.1;
    --line-height-title: 1;
    --line-height-text: 1.4;
    --line-height-table: 1.5;
  }
  /* MENU */

  #mobile-menu {
    position: fixed;
    display: inline-block;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 7.5vh;
    width: 17vw;
    background-color: var(--color-1);
    padding: 1vh 0;
    z-index: 100;
  }

  .bar {
    width: 15vw;
    height: 0.5vh;
    background-color: var(--color-4);
    margin: 1vh 1vw;
    transition: 0.4s;
  }

  .site-title {
    top: 0;
    left: 0;
    width: 83vw;
    height: 7.5vh;
    bottom: auto;
  }
  nav {
    position: fixed;
    width: 100vw;

    background: var(--color-1);
    top: -100vh;
    right: 0;
    display: block;
    bottom: 0;

    padding: 20vh 0;
    height: 100vh;
    align-items: center;
    z-index: 10;
  }

  nav ul {
    line-height: 2;
    height: 50vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  /* LANDINGPAGE */

  .rnd-img-2 {
    display: none;
  }

  .rnd-img-caption-2 {
    display: none;
  }

  .rnd-img-3 {
    grid-area: 3 / 8 / 7 / 24;
  }

  .rnd-img-caption-3 {
    grid-area: 3 / 8 / 7 / 24;
  }

  .rnd-img-4 {
    display: none;
  }

  .rnd-img-caption-4 {
    display: none;
  }

  /* PAGES */

  h1 {
    font-weight: 600;
  }

  h3 {
    font-weight: 500;
  }

  /* SWUP */

  /* OVERLAY */
  .preload-lightbox {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;

  }

  /* ARCHIVE */

  tr {
    height: auto;
  }
  thead tr {
    width: calc(100vw - 20px);
  }

  #resultTable thead {
    width: calc(100vw - 20px);
    text-align: left;
  }

  #resultTable {
    width: calc(100vw - 20px);
    border-bottom: 0px;
  }
  #resultTable td {
    border-bottom: 0px;
  }

  #resultTable tr {
    border-bottom: 1px solid var(--color-4);
  }

  tbody {
    width: calc(100vw - 20px);

    font-size: var(--caption);
  }

  button {
    border: 0px;
  }

  .div-group {
    display: flex;
    flex-direction: row;
    width: calc(100vw - 20px);
  }

  /* ----- */
  table {
    border: 0;
    width: calc(100vw - 20px);
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: calc(100vw - 20px);
  }

  table tr {
    display: block;
    margin: 0;
    padding: 10px 0;
  }

  table td {
    display: block;

    text-align: left;
  }

  table td::before {
    content: attr(data-label);
    float: left;
    width: 30vw;
    text-align: left;
    font-size: var(--caption);
  }

  table td:last-child {
    border-bottom: 0;
  }

  /* TAGS */

  #mobile-tags {
    width: 100vw;
  }

  #mobile-tags .arrow {
    margin-top: -0.3vw;
    width: 6.5vw;
    height: 6.5vw;
    border: solid var(--color-4);
    border-width: 0 4px 4px 0;

    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  /* SEARCH */
  input.js-search {
    height: 7.5vh;
    width: 100vw;
  }
  /* ARCHIVE CONTENT */
  .article-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    pointer-events: all;
    position: relative;
  }
  .article-container::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */

  .article-container {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
  .main-content {
    position: relative;
    overflow: visible;
    width: 100vw;
    height: auto;
    padding-bottom: 20vh;
  }

  .main-content img {
    width: calc(100vw - 10px);
  }

  .sidebar-content {
    padding-bottom: 30vh;
    overflow: visible;
    bottom: 0;
    position: relative;

    width: 100vw;
    background: var(--color-2);
    height: auto;
  }

  .breadcrumb {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .lightbox {
    display: flex;
    flex-direction: column;
    padding: 0 0 80px 0;

  }

  .lightbox img:not(:first-child) {
    display: none;
  }

  .gall-wrapper {
    display: flex;
    flex-direction: row;
  }

  .gall-caption {
    padding-top: 5px;
    width: calc(100vw - 100px);
  }

  img {
    max-height: 90vh;
  }

  .vbox-item {
    cursor: pointer;
  }

  .load-more {
    background: var(--color-2);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 3px;
    margin-left: 10px;
    height: 30px;
    width: 30px;
    align-self: flex-end;
    cursor: pointer;
  }

  .vbox-title {
    white-space: normal !important;
    line-height: 1.5 !important;
  }
  
  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
  }

  iframe.responsive-iframe > body img {
    height: 50%;
  }

  .iframecontainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }

  /* CAROUSEL */

  .swiper {
    height: 80vh;
    margin: 20px 0 40px 0;
  }

  .swiper-slide img {
    width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  }
  /* ABOUT */

  /* SUPPORT */

  /* MAGAZIN */
  .magazin-article p {
    text-align: left;
    width: calc(100vw - 40px);
  }

  #magazin-close {
    height: 50px;
    width: 50px;
    top: 40px;
    right: 30px;
    z-index: 1000000000 ;
  }

  #magazin-close::before,
  #magazin-close::after {
    background-color: var(--color-4);
  }

  #magazin-swup {
    width: 70vw !important;

    height: 100vh;
    top: 0vh;
    left: 0;
    padding: 20px 20px;
    overflow-x: hidden;
  }

  .magazin-fg {
    width: 100vw;
    left: 0px;
    overflow-x: hidden;
  }

  .magazin-title {
    font-size: var(--magazin-title);
    font-style: italic;
    padding: 0 0 4vw 0;
    text-align: center;
  }

  .magazin-author {
    padding: 80px 0 20px 0;
    font-size: var(--magazin-text);
  }

  .magazin-article img {
    padding: 20px 0 40px 0;
    max-height: 90vh;
    max-width: calc(100vw - 40px);
    overflow-x: hidden;
  }

  .magazin-article figcaption {
    font-size: 18px;
    margin-bottom: 40px;
    width: 80vw;
  }

  .magazin-article p {
    padding-bottom: 10px;
  }
  .magazin-article:last-of-type {
    padding-bottom: 40vh;
  }

  .magazin-item {
    width: calc((100vw - 20px) / 1);
  }

  #magazine-gutter {
    width: 100vw;
    height: 92.5vh;
    background-size: calc(400vw);
  }

  #magazin-content a:nth-child(1n + 1) {
    -moz-transform: skew(0deg, -13deg);
    -o-transform: skew(0deg, -13deg);
    -webkit-transform: skew(0deg, -13deg);
    transform: skew(0deg, -13deg);
    writing-mode: lr-tb;
  }

  #magazin-content a:nth-child(2n + 2) {
    -moz-transform: skew(0deg, -13deg);
    -o-transform: skew(0deg, -13deg);
    -webkit-transform: skew(0deg, -13deg);
    transform: skew(0deg, -13deg);
  }

  /* PARTICIPANTS */
  .columns {
    -webkit-column-count: 1; /* Saf3, Chrome*/
    -moz-column-count: 1; /* FF3.5+ */
    column-count: 1; /* Opera 11+*/
  }

  .video-aspect-ratio {
    max-width: calc(100vw - 40px);
    height: calc((100vw - 40px) * 0.5625);
  }

  .pdf-aspect-ratio {
    width: calc(100vw - 40px);
    height: calc((100vw - 40px) * 1.4142);
  }           

  .pdf-container div {
    width: calc(100vw - 40px);
  }  

  .consent__notice p {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  :root {
    --h1: 8vw;
    --h2: 6vw;
    --h3: 5vw;
    --text1: 22px;
    --text2: 18px;
    --magazin-text: 4.5vw;
    --magazin-title: 6vw;
  }

  #mobile-tags {
    align-items: center;
  }
  #mobile-tags .arrow {
    margin-top: -2.5vw;
    width: 6.5vw;
    height: 6.5vw;
  }

  .vbox-title {
    white-space: normal !important;
    line-height: 1.5 !important;
  }
}