:root {
  --color-1: #E54A21;
  --color-1-1: rgba(229, 74, 33, .2);
  --color-2: #EDE55C;
  --color-2-1: rgba(237, 229, 92, .8);
  --color-3: #8069AB;
  --color-3-1: rgba(128, 105, 171, .1);
  --color-4: #242E30;
  --color-5: #8E8F8F;
  --color-6: #D4D4D1;
  --color-7: #009AE5;
  --color-8: #6bb80d;
  --color-8-1: rgb(107, 184, 13);
  --color-8-2: rgb(107, 184, 130);
  --color-primary: var(--color-1);
  --color-secondary: var(--color-2);
  --nav-background-color: var(--color-3);
  --nav-color: var(--color-2);
  --button-color: var(--color-2);
  --button-background-color: var(--color-1);
  --font-size-base: 12px;
  --font-size-small: 1rem;
  --font-size-medium: 3rem;
  --font-size-large: 5rem;
  --letter-spacing: -0.01em;
  --gap-medium: 4rem;
  --abstand: 3rem;
  --logo-height: 6rem;
}
@media (min-width: 768px) {
  :root {
    --abstand: 4rem;
  }
}

@font-face {
  font-family: "Social";
  src: url("/fonts/ABCSocial-Medium-Trial.woff2");
}
@font-face {
  font-family: "Tanker";
  src: url("/fonts/Tanker-Regular.otf");
}
@font-face {
  font-family: "Cabinet";
  src: url("/fonts/CabinetGrotesk-Bold.woff2");
}
@font-face {
  font-family: "Rowan";
  src: url("/fonts/Rowan-Medium.woff2");
}
* {
  box-sizing: border-box;
  position: relative;
}

figure {
  margin: unset;
}
figure img {
  width: 100%;
  height: auto;
}

html {
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing);
  background-color: var(--color-6);
  color: var(--color-primary);
}

*::selection {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

body {
  font-family: "Cabinet";
  line-height: 1;
}

em {
  background-color: var(--color-3);
  color: var(--color-secondary);
  font-style: normal;
  display: inline-block;
  padding: 0.05em 0.1em;
}

h1, h2, h3 {
  font-weight: normal;
  color: var(--color);
  margin: unset;
}

h2 {
  font-size: 3rem;
  letter-spacing: 0.01em;
}

html {
  scroll-behavior: smooth;
  font-size: max(9px, 0.8vw);
  --logo-height: 4rem;
}
@media (min-width: 768px) {
  html {
    --logo-height: 6rem;
  }
}

body {
  margin: unset;
}
body.is-preloading {
  overflow: unset;
}

#preloader {
  display: none;
}
#preloader .preloader-svg-wrap {
  width: calc(100vw - 2rem);
  height: calc(100vh - 2rem);
  width: calc(100dvw - 2rem);
  height: calc(100dvh - 2rem);
}
#preloader svg {
  width: 100%;
  height: 100%;
  display: block;
}

#intro {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 6.2rem;
  line-height: 1;
  text-wrap: balance;
  margin: unset;
}
@media (min-width: 768px) {
  #intro {
    grid-template-columns: 4fr 2fr;
  }
}
#intro .einleitung h1 {
  padding: var(--abstand);
  font-size: 3.6rem;
}
@media (min-width: 768px) {
  #intro .einleitung h1 {
    padding: var(--abstand) 12rem var(--abstand) var(--abstand);
    font-size: inherit;
  }
}
#intro .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#intro .background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main {
  grid-area: main;
  overflow: hidden;
}

#updates {
  background-color: var(--color-3);
  color: var(--color-secondary);
  min-width: 0;
}
#updates .inner-container {
  display: flex;
  flex-direction: column;
}
#updates .cta-instagram {
  position: absolute;
  top: 0;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  #updates .cta-instagram {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
}
#updates .cta-instagram {
  height: calc((var(--logo-height) + 2rem) / 2 + 0.5em);
  color: var(--color-2);
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 var(--abstand);
  z-index: 2;
  width: 100%;
}
#updates .cta-instagram a {
  appearance: none;
  border: unset;
  font-family: inherit;
  background-color: unset;
  text-decoration: unset;
  color: var(--button-color);
  padding: 0.5em 1em;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
@media (min-width: 768px) {
  #updates .cta-instagram a {
    padding: 0.5em 1.6em;
  }
}
#updates .cta-instagram a:hover {
  color: var(--button-background-color);
}
#updates .cta-instagram a:hover::before,
#updates .cta-instagram a:hover .flaeche {
  rotate: -2deg;
  scale: 1.05;
  background-color: var(--button-color);
}
#updates .cta-instagram a::before, #updates .cta-instagram a .flaeche {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--button-background-color);
  rotate: 2deg;
  border-radius: 100px;
  transition: rotate 300ms, scale 300ms, background-color 300ms;
}
#updates .cta-instagram a .icon {
  align-self: center;
  width: 1em;
  height: 1em;
}
#updates .cta-instagram a .icon svg {
  width: 100%;
  height: 100%;
}
#updates .cta-instagram a .icon + .text {
  padding-top: 0.1em;
}
#updates .cta-instagram a.inline-button {
  padding: unset;
  color: inherit;
}
#updates .cta-instagram a.inline-button:hover .text {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
#updates .cta-instagram a.inline-button .flaeche, #updates .cta-instagram a.inline-button::before {
  display: none;
}
#updates .cta-instagram a {
  --button-background-color: var(--color-2);
  --button-color: var(--color-1);
}
#updates .swiper {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#updates .swiper-wrapper {
  flex: 1;
  align-items: center;
}
#updates .swiper-slide {
  height: 100%;
  padding-top: var(--logo-height);
}
#updates .swiper-navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 var(--abstand) calc(var(--abstand) / 2);
  z-index: 10;
}
#updates .swiper[data-swiper-disabled] .swiper-navigation {
  display: none;
}
#updates .swiper-button-prev,
#updates .swiper-button-next {
  position: static;
  top: unset;
  margin-top: unset;
  appearance: none;
  border: unset;
  font-family: inherit;
  width: 3rem;
  height: 3rem;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--button-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: rotate 300ms, scale 300ms;
}
#updates .swiper-button-prev::after,
#updates .swiper-button-next::after {
  content: none;
}
#updates .swiper-button-prev:hover,
#updates .swiper-button-next:hover {
  rotate: -8deg;
  scale: 1.05;
}
#updates .swiper-button-prev.swiper-button-disabled,
#updates .swiper-button-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
#updates .swiper-button-prev svg,
#updates .swiper-button-next svg {
  width: 2rem;
  height: 2rem;
}
#updates .swiper-pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  top: unset;
  bottom: unset;
}
#updates .swiper-pagination-bullet {
  display: block;
  background-color: rgba(236, 229, 91, 0.3);
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 1000px;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  background-clip: content-box;
  box-sizing: content-box;
  transition: width 300ms ease, background-color 200ms;
}
#updates .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
  background-color: var(--color-2);
}
#updates .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 40px;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  cursor: default;
}
#updates .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1000px;
  background-color: rgba(236, 229, 91, 0.3);
}
#updates .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1000px;
  background-color: var(--color-2);
  transform: scaleX(0);
  transform-origin: left;
  animation: bullet-progress var(--bullet-duration, 8s) linear forwards;
}
@media (hover: hover) {
  #updates .swiper:hover .swiper-pagination-bullet-active::after {
    animation-play-state: paused;
  }
}
#updates .swiper:not([data-swiper-disabled]) article {
  padding-bottom: calc(3rem + var(--abstand));
}
#updates article {
  padding: var(--abstand);
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  #updates article {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
}
#updates article .open-call-badge {
  width: 100%;
  margin: 0 auto 2rem;
  aspect-ratio: 3/2;
}
#updates article .open-call-icon {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
}
#updates article .open-call-ring {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--color-2);
  z-index: 1;
}
#updates article .open-call-ring text {
  font-family: "Tanker";
  font-size: 0.8rem;
  stroke: var(--color-3);
  stroke-width: 1px;
  paint-order: stroke fill;
  fill: currentColor;
  text-transform: uppercase;
}
#updates article a {
  appearance: none;
  border: unset;
  font-family: inherit;
  background-color: unset;
  text-decoration: unset;
  color: var(--button-color);
  padding: 0.5em 1em;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
@media (min-width: 768px) {
  #updates article a {
    padding: 0.5em 1.6em;
  }
}
#updates article a:hover {
  color: var(--button-background-color);
}
#updates article a:hover::before,
#updates article a:hover .flaeche {
  rotate: -2deg;
  scale: 1.05;
  background-color: var(--button-color);
}
#updates article a::before, #updates article a .flaeche {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--button-background-color);
  rotate: 2deg;
  border-radius: 100px;
  transition: rotate 300ms, scale 300ms, background-color 300ms;
}
#updates article a .icon {
  align-self: center;
  width: 1em;
  height: 1em;
}
#updates article a .icon svg {
  width: 100%;
  height: 100%;
}
#updates article a .icon + .text {
  padding-top: 0.1em;
}
#updates article a.inline-button {
  padding: unset;
  color: inherit;
}
#updates article a.inline-button:hover .text {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
#updates article a.inline-button .flaeche, #updates article a.inline-button::before {
  display: none;
}
#updates article.instagram-post {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#updates article.instagram-post .instagram-media-link {
  padding: 0;
  display: block;
  flex: 1;
  min-height: 0;
  border-radius: 1rem;
  overflow: hidden;
}
#updates article.instagram-post .instagram-media-link::before {
  content: none;
}
#updates article.instagram-post .instagram-media-link:hover img {
  scale: 1.03;
}
#updates article.instagram-post .instagram-media-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 300ms;
}
#updates article.instagram-post .instagram-caption {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#updates article.instagram-post .instagram-date {
  opacity: 0.6;
}
#updates .swiper-slide.artist-announcement {
  background-color: var(--color-4);
}
#updates .swiper-slide.artist-announcement article {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-3);
  padding-top: calc(var(--abstand) / 2);
  border-radius: 1rem;
}
#updates .swiper-slide.artist-announcement .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Tanker";
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: "Tanker";
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
@media (min-width: 768px) {
  #updates .swiper-slide.artist-announcement .top {
    font-size: 3.2rem;
  }
}
#updates .swiper-slide.artist-announcement figure {
  flex: 3;
  min-height: 0;
  margin: 0;
}
#updates .swiper-slide.artist-announcement figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#updates .swiper-slide.artist-announcement svg {
  flex: 2;
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
  margin: auto 0;
}
#updates .swiper-slide.artist-announcement svg path {
  fill: var(--color-3);
}
#updates .swiper-slide.artist-announcement .bottom {
  display: flex;
  justify-content: center;
}
#updates .swiper-slide.artist-announcement .category {
  display: inline-block;
  font-family: "Tanker";
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--color-3);
  color: var(--color-4);
  padding: 0 0.1em;
  font-family: "Tanker";
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
@media (min-width: 768px) {
  #updates .swiper-slide.artist-announcement .category {
    font-size: 3.2rem;
  }
}
#updates .swiper-slide.artist-announcement .category {
  line-height: 1em;
  font-size: 3.85rem;
  white-space: nowrap;
  hyphens: none;
}
#updates .swiper-slide.tickets-announcement article {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#updates .swiper-slide.tickets-announcement svg {
  width: 100%;
  height: auto;
}
#updates .swiper-slide.tickets-announcement .text-container {
  font-family: "Tanker";
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
@media (min-width: 768px) {
  #updates .swiper-slide.tickets-announcement .text-container {
    font-size: 3.2rem;
  }
}
#updates .swiper-slide.tickets-announcement .text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  padding: var(--abstand);
}
#updates .swiper-slide.tickets-announcement .text-container span {
  background-color: var(--color-2);
  color: var(--color-3);
  line-height: 1.1em;
  padding: 0em 0.2em;
}
#updates .swiper-slide.tickets-announcement a {
  width: auto;
  margin: 0 auto;
  justify-content: center;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
  flex-wrap: nowrap;
  gap: 0.2em;
  font-size: 2.3rem;
  letter-spacing: 0.025em;
}
@media (min-width: 768px) {
  #updates .swiper-slide.tickets-announcement a {
    font-size: 2.25rem;
  }
}
#updates .swiper-slide.tickets-announcement a a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
#updates .swiper-slide.tickets-announcement a a:hover {
  color: var(--color-3);
}
#updates .swiper-slide.tickets-announcement a svg {
  stroke-width: 3;
}

#tickets {
  grid-area: tickets;
  background-color: var(--color-3);
  color: var(--color-2);
  overflow: hidden;
}
#tickets .background {
  display: none;
  width: 100%;
  opacity: 0.1;
  padding: 2rem;
}
@media (min-width: 768px) {
  #tickets .background {
    display: block;
  }
}
#tickets .background svg {
  width: 100%;
  height: auto;
  color: var(--color-4);
}
#tickets .inner-wrapper {
  position: static;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 2rem;
}
@media (min-width: 768px) {
  #tickets .inner-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 8rem 4rem;
  }
}
#tickets h2 {
  font-family: "Tanker";
  font-size: 6.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-align: center;
  margin-bottom: 3rem;
}

#artists {
  grid-area: artists;
  position: relative;
  font-size: 6.2rem;
  line-height: 1;
  text-wrap: balance;
  font-size: 3.2rem;
  background-color: var(--color-2);
  text-align: center;
  overflow: hidden;
  padding: var(--abstand);
  cursor: none;
}
@media (min-width: 768px) {
  #artists {
    font-size: 6.2rem;
  }
}
#artists .artists-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.5em;
  line-height: 1;
  cursor: none;
}
#artists .artists-group + .artists-group {
  margin-top: 1em;
}
#artists .augen {
  width: 8rem;
  margin: 1rem auto;
  pointer-events: none;
  z-index: 1;
}
#artists .augen svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
}
#artists .augen .eyeball {
  fill: var(--color-2);
}
#artists .artist {
  white-space: nowrap;
  display: inline-block;
  transition: rotate 150ms;
}
#artists .artist:hover {
  rotate: 2deg;
}
#artists .artist.markiert {
  background-color: var(--color-1);
  color: var(--color-2);
  padding: 0.05em 0.1em;
}
#artists h2, #artists p {
  width: 100%;
  font-family: "Tanker";
  font-size: 6.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: unset;
}

#map {
  grid-area: map;
  background-color: var(--color-6);
  display: flex;
  flex-direction: column;
  gap: var(--abstand);
  padding: var(--abstand);
}
#map .container-map {
  flex: 3;
  min-width: 0;
  padding: calc(var(--abstand) * 2);
}
#map .container-map svg {
  rotate: -5deg;
  display: block;
  width: 100%;
  height: auto;
}
#map .text-container {
  flex: 2;
  min-width: 0;
  max-width: 100ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#map .text-container h2 {
  font-family: "Tanker";
  font-size: 6.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
#map .text-container p {
  font-size: 2.3rem;
  letter-spacing: 0.025em;
}
@media (min-width: 768px) {
  #map .text-container p {
    font-size: 2.25rem;
  }
}
#map .text-container p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
#map .text-container p a:hover {
  color: var(--color-3);
}
#map .text-container p {
  margin: unset;
}

@keyframes open-call-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes bullet-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #updates article .open-call-ring {
    animation: none;
  }
}
header#mainHeader {
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  background-color: var(--color-6);
}
header#mainHeader > * {
  z-index: 1;
}
header#mainHeader nav {
  display: flex;
}
header#mainHeader .group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem var(--abstand);
  width: 100%;
}
@media (min-width: 768px) {
  header#mainHeader .group {
    padding: 1rem var(--abstand);
  }
}
header#mainHeader svg.logo {
  width: auto;
  height: var(--logo-height);
  display: block;
}
header#mainHeader svg.logo-hover {
  display: none;
}
header#mainHeader ul {
  list-style: none;
  display: flex;
  gap: 1.6em;
  margin: unset;
  padding: unset;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  header#mainHeader ul {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
}
header#mainHeader a {
  text-decoration: unset;
  color: unset;
}
header#mainHeader a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
header#mainHeader a.soon {
  pointer-events: none;
  opacity: 0.6;
}
header#mainHeader a.soon span::after {
  content: "Soon";
  font-family: "TANKER";
  position: absolute;
  top: 0;
  right: 0;
  translate: 50% -50%;
  rotate: 5deg;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  header#mainHeader a.soon span::after {
    font-size: 1.2rem;
  }
}
header#mainHeader a.now span::after {
  content: "Now!";
  font-family: "TANKER";
  position: absolute;
  top: 0;
  right: 0;
  translate: 50% -50%;
  rotate: 5deg;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  header#mainHeader a.now span::after {
    font-size: 1.2rem;
  }
}
header#mainHeader a.now span::after {
  color: var(--color-2);
  background-color: var(--color-3);
  padding: 0.2em 0.2em 0.1em;
  border-radius: 0.1em;
}
header#mainHeader a.cta {
  --button-background-color: var(--color-2);
  --button-color: var(--color-1);
  appearance: none;
  border: unset;
  font-family: inherit;
  background-color: unset;
  text-decoration: unset;
  color: var(--button-color);
  padding: 0.5em 1em;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
@media (min-width: 768px) {
  header#mainHeader a.cta {
    padding: 0.5em 1.6em;
  }
}
header#mainHeader a.cta:hover {
  color: var(--button-background-color);
}
header#mainHeader a.cta:hover::before,
header#mainHeader a.cta:hover .flaeche {
  rotate: -2deg;
  scale: 1.05;
  background-color: var(--button-color);
}
header#mainHeader a.cta::before, header#mainHeader a.cta .flaeche {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--button-background-color);
  rotate: 2deg;
  border-radius: 100px;
  transition: rotate 300ms, scale 300ms, background-color 300ms;
}
header#mainHeader a.cta .icon {
  align-self: center;
  width: 1em;
  height: 1em;
}
header#mainHeader a.cta .icon svg {
  width: 100%;
  height: 100%;
}
header#mainHeader a.cta .icon + .text {
  padding-top: 0.1em;
}
header#mainHeader a.cta.inline-button {
  padding: unset;
  color: inherit;
}
header#mainHeader a.cta.inline-button:hover .text {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
header#mainHeader a.cta.inline-button .flaeche, header#mainHeader a.cta.inline-button::before {
  display: none;
}
header#mainHeader a.active {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
header#mainHeader ul {
  display: none;
}
@media (min-width: 768px) {
  header#mainHeader ul {
    display: flex;
  }
}

nav.condensed-nav {
  display: none;
  position: fixed;
  top: 1.5rem;
  left: 50%;
  z-index: 200;
}
@media (min-width: 768px) {
  nav.condensed-nav {
    display: block;
  }
}
nav.condensed-nav {
  background-color: var(--color-2-1);
  backdrop-filter: blur(1.6rem);
  -webkit-backdrop-filter: blur(1.6rem);
  border-radius: 1000px;
  transform: translateX(-50%) translateY(calc(-100% - 2rem));
  transition: transform 0.6s ease;
}
nav.condensed-nav::after {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -2px;
  left: -2px;
  border: 1px solid var(--color-1);
  border-radius: 1000px;
  opacity: 0.2;
  pointer-events: none;
}
nav.condensed-nav.is-visible {
  transform: translateX(-50%) translateY(0%);
}
nav.condensed-nav .group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.2rem;
  gap: 1rem;
}
@media (min-width: 768px) {
  nav.condensed-nav .group {
    padding: 1rem var(--abstand);
    gap: 3rem;
  }
}
nav.condensed-nav svg.logo {
  width: auto;
  height: var(--logo-height);
  display: block;
}
nav.condensed-nav svg.logo-hover {
  display: none;
}
nav.condensed-nav ul {
  list-style: none;
  display: flex;
  gap: 1.6em;
  margin: unset;
  padding: unset;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  nav.condensed-nav ul {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
}
nav.condensed-nav a {
  text-decoration: unset;
  color: unset;
}
nav.condensed-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
nav.condensed-nav a.soon {
  pointer-events: none;
  opacity: 0.6;
}
nav.condensed-nav a.soon span::after {
  content: "Soon";
  font-family: "TANKER";
  position: absolute;
  top: 0;
  right: 0;
  translate: 50% -50%;
  rotate: 5deg;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  nav.condensed-nav a.soon span::after {
    font-size: 1.2rem;
  }
}
nav.condensed-nav a.now span::after {
  content: "Now!";
  font-family: "TANKER";
  position: absolute;
  top: 0;
  right: 0;
  translate: 50% -50%;
  rotate: 5deg;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  nav.condensed-nav a.now span::after {
    font-size: 1.2rem;
  }
}
nav.condensed-nav a.now span::after {
  color: var(--color-2);
  background-color: var(--color-3);
  padding: 0.2em 0.2em 0.1em;
  border-radius: 0.1em;
}
nav.condensed-nav a.cta {
  --button-background-color: var(--color-2);
  --button-color: var(--color-1);
  appearance: none;
  border: unset;
  font-family: inherit;
  background-color: unset;
  text-decoration: unset;
  color: var(--button-color);
  padding: 0.5em 1em;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
@media (min-width: 768px) {
  nav.condensed-nav a.cta {
    padding: 0.5em 1.6em;
  }
}
nav.condensed-nav a.cta:hover {
  color: var(--button-background-color);
}
nav.condensed-nav a.cta:hover::before,
nav.condensed-nav a.cta:hover .flaeche {
  rotate: -2deg;
  scale: 1.05;
  background-color: var(--button-color);
}
nav.condensed-nav a.cta::before, nav.condensed-nav a.cta .flaeche {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--button-background-color);
  rotate: 2deg;
  border-radius: 100px;
  transition: rotate 300ms, scale 300ms, background-color 300ms;
}
nav.condensed-nav a.cta .icon {
  align-self: center;
  width: 1em;
  height: 1em;
}
nav.condensed-nav a.cta .icon svg {
  width: 100%;
  height: 100%;
}
nav.condensed-nav a.cta .icon + .text {
  padding-top: 0.1em;
}
nav.condensed-nav a.cta.inline-button {
  padding: unset;
  color: inherit;
}
nav.condensed-nav a.cta.inline-button:hover .text {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
nav.condensed-nav a.cta.inline-button .flaeche, nav.condensed-nav a.cta.inline-button::before {
  display: none;
}
nav.condensed-nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
nav.condensed-nav svg.logo {
  height: calc(var(--logo-height) * 0.618);
}
nav.condensed-nav ul {
  display: none;
}
@media (min-width: 768px) {
  nav.condensed-nav ul {
    display: flex;
  }
}

.nav-toggle {
  appearance: none;
  border: unset;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 260;
  right: calc(var(--abstand));
  bottom: calc(var(--abstand));
  width: 8rem;
  height: 8rem;
  padding: 0;
  background-color: var(--color-2-1);
  backdrop-filter: blur(1.6rem);
  -webkit-backdrop-filter: blur(1.6rem);
  border-radius: 50%;
}
.nav-toggle::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 1px solid var(--color-1-1);
  pointer-events: none;
  border-radius: 1000px;
}
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}
.nav-toggle .nav-toggle-icon {
  position: relative;
  width: 2.6rem;
  display: block;
}
.nav-toggle .nav-toggle-line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0.3rem;
  border-radius: 0.1rem;
  background-color: currentColor;
  transition: translate 300ms ease, rotate 300ms ease, opacity 200ms ease;
}
.nav-toggle .nav-toggle-line:nth-child(1) {
  translate: 0 calc(-50% - 0.5rem);
}
.nav-toggle .nav-toggle-line:nth-child(2) {
  translate: 0 calc(-50% + 0.5rem);
}

#mobileNavBackdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  background-color: rgba(36, 46, 48, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms, visibility 300ms;
}

nav#mobileNav {
  position: fixed;
  z-index: 251;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--color-3);
  color: var(--color-2);
  padding: 2rem 0 calc(12rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 400ms ease, visibility 400ms;
}
nav#mobileNav svg.logo {
  width: auto;
  height: var(--logo-height);
  display: block;
}
nav#mobileNav svg.logo-hover {
  display: none;
}
nav#mobileNav ul {
  list-style: none;
  display: flex;
  gap: 1.6em;
  margin: unset;
  padding: unset;
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  nav#mobileNav ul {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
}
nav#mobileNav a {
  text-decoration: unset;
  color: unset;
}
nav#mobileNav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
nav#mobileNav a.soon {
  pointer-events: none;
  opacity: 0.6;
}
nav#mobileNav a.soon span::after {
  content: "Soon";
  font-family: "TANKER";
  position: absolute;
  top: 0;
  right: 0;
  translate: 50% -50%;
  rotate: 5deg;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  nav#mobileNav a.soon span::after {
    font-size: 1.2rem;
  }
}
nav#mobileNav a.now span::after {
  content: "Now!";
  font-family: "TANKER";
  position: absolute;
  top: 0;
  right: 0;
  translate: 50% -50%;
  rotate: 5deg;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  nav#mobileNav a.now span::after {
    font-size: 1.2rem;
  }
}
nav#mobileNav a.now span::after {
  color: var(--color-2);
  background-color: var(--color-3);
  padding: 0.2em 0.2em 0.1em;
  border-radius: 0.1em;
}
nav#mobileNav a.cta {
  --button-background-color: var(--color-2);
  --button-color: var(--color-1);
  appearance: none;
  border: unset;
  font-family: inherit;
  background-color: unset;
  text-decoration: unset;
  color: var(--button-color);
  padding: 0.5em 1em;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
@media (min-width: 768px) {
  nav#mobileNav a.cta {
    padding: 0.5em 1.6em;
  }
}
nav#mobileNav a.cta:hover {
  color: var(--button-background-color);
}
nav#mobileNav a.cta:hover::before,
nav#mobileNav a.cta:hover .flaeche {
  rotate: -2deg;
  scale: 1.05;
  background-color: var(--button-color);
}
nav#mobileNav a.cta::before, nav#mobileNav a.cta .flaeche {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--button-background-color);
  rotate: 2deg;
  border-radius: 100px;
  transition: rotate 300ms, scale 300ms, background-color 300ms;
}
nav#mobileNav a.cta .icon {
  align-self: center;
  width: 1em;
  height: 1em;
}
nav#mobileNav a.cta .icon svg {
  width: 100%;
  height: 100%;
}
nav#mobileNav a.cta .icon + .text {
  padding-top: 0.1em;
}
nav#mobileNav a.cta.inline-button {
  padding: unset;
  color: inherit;
}
nav#mobileNav a.cta.inline-button:hover .text {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
nav#mobileNav a.cta.inline-button .flaeche, nav#mobileNav a.cta.inline-button::before {
  display: none;
}
nav#mobileNav a.active {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
nav#mobileNav ul {
  flex-direction: column;
  gap: unset;
}
nav#mobileNav a {
  font-family: "Tanker";
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
@media (min-width: 768px) {
  nav#mobileNav a {
    font-size: 3.2rem;
  }
}
nav#mobileNav a {
  padding: 0.3em var(--abstand);
  display: block;
  font-size: 4rem;
}
nav#mobileNav a.now span::after {
  color: var(--color-1);
  background-color: var(--color-2);
}

[data-nav-open] .nav-toggle .nav-toggle-line:nth-child(1) {
  translate: 0 -50%;
  rotate: 45deg;
}
[data-nav-open] .nav-toggle .nav-toggle-line:nth-child(2) {
  translate: 0 -50%;
  rotate: -45deg;
}
[data-nav-open] #mobileNavBackdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
[data-nav-open] nav#mobileNav {
  transform: translateY(0%);
  visibility: visible;
}

footer {
  grid-area: footer;
  padding: 2rem 2rem calc(12rem + env(safe-area-inset-bottom));
  background-color: var(--color-6);
  display: flex;
  flex-direction: column;
  gap: var(--abstand);
}
@media (min-width: 768px) {
  footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: unset;
    padding: 2rem;
  }
}
footer .socials {
  grid-column: span 2;
  margin-bottom: 2rem;
}
footer #footerUntermOssiMobile {
  width: 100%;
  height: auto;
  grid-column: span 2;
  margin-bottom: var(--abstand);
}
@media (min-width: 768px) {
  footer #footerUntermOssiMobile {
    display: none;
  }
}
footer #footerUntermOssi {
  display: none;
  grid-column: span 2;
  margin-bottom: var(--abstand);
}
@media (min-width: 768px) {
  footer #footerUntermOssi {
    display: block;
    width: 100%;
    height: auto;
  }
}
footer h2, footer p {
  font-size: 2.3rem;
  letter-spacing: 0.025em;
}
@media (min-width: 768px) {
  footer h2, footer p {
    font-size: 2.25rem;
  }
}
footer h2 a, footer p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
footer h2 a:hover, footer p a:hover {
  color: var(--color-3);
}
footer h2, footer p {
  margin: unset;
}
footer .logos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  padding-top: 1rem;
}
footer .logos img,
footer .logos svg {
  width: 100%;
  max-width: 30rem;
  height: auto;
}
footer p + h2,
footer p + p {
  margin-top: 1em;
}

.banner-wrapper {
  overflow: hidden;
  width: 100%;
}

.banner {
  font-size: var(--font-size-large);
  color: var(--color);
  display: flex;
  gap: var(--gap-medium);
  white-space: nowrap;
  will-change: transform;
}
.banner span {
  flex-shrink: 0;
}

.artists-cursor {
  position: absolute;
  top: 0;
  left: 0;
  translate: -50% -50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-3);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.keyvisual-container {
  padding: 0 2rem;
}

#keyvisual {
  width: 100%;
  height: auto;
}

header.section-header {
  background-color: var(--color-primary);
  clip-path: polygon(20% 0%, 90% 0%, 100% 20%, 100% 90%, 90% 100%, 20% 100%, 0% 90%, 0% 20%);
  padding: 2rem 4rem;
  text-align: center;
}
header.section-header:hover {
  clip-path: polygon(5% 0%, 90% 0%, 100% 5%, 100% 90%, 90% 100%, 5% 100%, 0% 90%, 0% 5%);
}

.swiper {
  opacity: 0;
  visibility: hidden;
  transition: 600ms;
}
.swiper.swiper-initialized, .swiper[data-swiper-disabled] {
  opacity: 1;
  visibility: visible;
}

.ticket {
  --ticket-notch: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(90%, 40rem);
  margin: 0 auto;
  background-color: var(--color-2);
  color: var(--color-3);
  border-radius: 1.6rem;
  rotate: -3deg;
  transition: rotate 300ms, scale 300ms;
  overflow: hidden;
  text-decoration: unset;
}
@media (min-width: 768px) {
  .ticket {
    width: min(100%, 70rem);
    flex-direction: row;
  }
  .ticket:hover {
    rotate: 0deg;
    scale: 1.05;
  }
}
.ticket .ticket-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  padding: 1rem;
}
@media (min-width: 768px) {
  .ticket .ticket-main {
    grid-template-columns: 1fr 1fr;
  }
}
.ticket .ticket-main::after {
  --dot-size: 2px;
  --gap: 8px;
  content: "";
  position: absolute;
  color: var(--color-3);
  bottom: calc(var(--dot-size) * -1);
  left: 0;
  height: calc(var(--dot-size) * 2);
  width: 100%;
}
@media (min-width: 768px) {
  .ticket .ticket-main::after {
    left: unset;
    bottom: unset;
    right: calc(var(--dot-size) * -1);
    top: 0;
    width: calc(var(--dot-size) * 2);
    height: 100%;
  }
}
.ticket .ticket-main::after {
  background-image: radial-gradient(circle, currentColor var(--dot-size), transparent var(--dot-size));
  background-size: calc(var(--dot-size) + var(--gap)) calc(var(--dot-size) + var(--gap));
  background-repeat: repeat;
  background-position: center;
}
.ticket .ticket-stub {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
}
@media (min-width: 768px) {
  .ticket .ticket-stub {
    flex: 0 0 20rem;
    width: auto;
    padding: 4rem;
  }
}
.ticket .ticket-stub::before, .ticket .ticket-stub::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--ticket-notch);
  height: var(--ticket-notch);
  border-radius: 50%;
  background-color: var(--color-3);
}
.ticket .ticket-stub::before {
  top: 0;
  translate: -50% -50%;
}
.ticket .ticket-stub::after {
  top: 0;
  right: 0;
  left: unset;
  translate: 50% -50%;
}
@media (min-width: 768px) {
  .ticket .ticket-stub::after {
    translate: -50% 50%;
    top: unset;
    right: unset;
    left: 0;
    bottom: 0;
  }
}
.ticket .ticket-title {
  font-size: 4.8rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-wrap: balance;
  font-family: "Tanker";
}
.ticket .ticket-tier {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem;
  background-color: var(--color-3-1);
  border-radius: 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  .ticket .ticket-tier {
    align-items: start;
    text-align: left;
  }
}
.ticket .ticket-tier-name {
  font-family: "Tanker";
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
@media (min-width: 768px) {
  .ticket .ticket-tier-name {
    font-size: 3.2rem;
  }
}
.ticket .ticket-tier-name {
  display: inline-block;
  background-color: var(--color-3);
  color: var(--color-2);
  font-family: "Tanker";
  text-transform: uppercase;
  padding: 0.1em 0.3em;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .ticket .ticket-tier-name {
    align-self: flex-start;
  }
}
.ticket .ticket-tier-price {
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .ticket .ticket-tier-price {
    font-size: 1.6rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
}
.ticket .ticket-tier-note {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  .ticket .ticket-tier-note {
    font-size: 1.2rem;
  }
}
.ticket .ticket-tier-note {
  margin-top: auto;
  padding-top: 2em;
}
.ticket .ticket-tier-note.ticket-tier-note--small {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  .ticket .ticket-tier-note.ticket-tier-note--small {
    font-size: 1.2rem;
  }
}
.ticket .ticket-cta-container {
  grid-column: 1/-1;
  padding: 1rem;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  justify-content: center;
}
@media (min-width: 768px) {
  .ticket .ticket-cta-container {
    display: flex;
  }
}
.ticket .ticket-cta {
  appearance: none;
  border: unset;
  font-family: inherit;
  background-color: unset;
  text-decoration: unset;
  color: var(--button-color);
  padding: 0.5em 1em;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
@media (min-width: 768px) {
  .ticket .ticket-cta {
    padding: 0.5em 1.6em;
  }
}
.ticket .ticket-cta:hover {
  color: var(--button-background-color);
}
.ticket .ticket-cta:hover::before,
.ticket .ticket-cta:hover .flaeche {
  rotate: -2deg;
  scale: 1.05;
  background-color: var(--button-color);
}
.ticket .ticket-cta::before, .ticket .ticket-cta .flaeche {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--button-background-color);
  rotate: 2deg;
  border-radius: 100px;
  transition: rotate 300ms, scale 300ms, background-color 300ms;
}
.ticket .ticket-cta .icon {
  align-self: center;
  width: 1em;
  height: 1em;
}
.ticket .ticket-cta .icon svg {
  width: 100%;
  height: 100%;
}
.ticket .ticket-cta .icon + .text {
  padding-top: 0.1em;
}
.ticket .ticket-cta.inline-button {
  padding: unset;
  color: inherit;
}
.ticket .ticket-cta.inline-button:hover .text {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
.ticket .ticket-cta.inline-button .flaeche, .ticket .ticket-cta.inline-button::before {
  display: none;
}
.ticket .ticket-cta {
  font-size: 2.3rem;
  letter-spacing: 0.025em;
}
@media (min-width: 768px) {
  .ticket .ticket-cta {
    font-size: 2.25rem;
  }
}
.ticket .ticket-cta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.1em;
}
.ticket .ticket-cta a:hover {
  color: var(--color-3);
}
.ticket .ticket-cta {
  white-space: nowrap;
  --button-color: var(--color-2);
}
.ticket .ticket-cta:hover {
  --button-color: var(--color-3);
  --button-background-color: var(--color-2);
}
.ticket .ticket-cta-hint {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  .ticket .ticket-cta-hint {
    font-size: 1.2rem;
  }
}
.ticket .ticket-cta-hint {
  max-width: 70ch;
  text-wrap: balance;
}
.ticket .ticket-stub-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .ticket .ticket-stub-cta {
    display: none;
  }
}
.ticket .ticket-stub-hint,
.ticket .ticket-stub-qr,
.ticket .ticket-stub-label,
.ticket .ticket-stub-logo {
  display: none;
}
@media (min-width: 768px) {
  .ticket .ticket-stub-hint,
  .ticket .ticket-stub-qr,
  .ticket .ticket-stub-label,
  .ticket .ticket-stub-logo {
    display: block;
  }
}
.ticket .ticket-stub-hint {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  .ticket .ticket-stub-hint {
    font-size: 1.2rem;
  }
}
.ticket .ticket-stub-qr {
  width: 100%;
  max-width: 15rem;
  border-radius: 0.75rem;
  padding: 1rem;
}
.ticket .ticket-stub-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.ticket .ticket-stub-label {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.035em;
}
@media (min-width: 768px) {
  .ticket .ticket-stub-label {
    font-size: 1.2rem;
  }
}
.ticket .ticket-stub-logo {
  width: 100%;
  height: auto;
}

#programm {
  display: none;
}
#programm ul {
  list-style: none;
  margin: unset;
  padding: unset;
}
#programm .stage-name {
  font-weight: normal;
  margin: unset;
}
#programm .stage-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 2rem;
}
@media (min-width: 768px) {
  #programm .stage-list {
    flex-direction: row;
    gap: unset;
  }
}
#programm .stage-item {
  flex: 1;
}
#programm .set-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 0.2rem solid currentColor;
  padding: 0.5rem 0 0;
}
#programm .set-name {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}
#programm .set-time {
  width: 100%;
}

/*# sourceMappingURL=style.css.map */