:root {
  --vh-100: 100vh;
  --page-padding: 10px;
  --border-radius: 20px;
  --header-height: 0px;

  --color-black: #000;
  --color-white: #fff;

  --color-yellow: #f6c63a;
  --color-yellow-light: #f4eed3;
  --color-purple: #c318f1;
  --color-purple-medium: #9c009d;
  --color-purple-dark: #4c2556;

  --plyr-range-fill-background: var(--color-purple);
  --plyr-color-main: var(--color-purple);

  --font-family-title: "Ginto", Helvetica, Arial, sans-serif;
  --font-family-default: "Inter", Helvetica, Arial, sans-serif;

  --font-size-xs: 0.75rem; /* 12px */
  --font-size-s: 1rem; /* 16px */
  --font-size-m: 1.25rem; /* 20px */
  --font-size-l: 1.5rem; /* 24px */
  --font-size-xl: 2rem; /* 32px */
  --font-size-xxl: 3rem; /* 48px */
  --font-size-xxxl: 3rem; /* 48px */

  --bezier-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bezier-bounce-big: cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

@media screen and (min-width: 700px) {
  :root {
    --page-padding: 20px;
    --border-radius: 30px;

    --font-size-xs: 1rem; /* 16px */
    --font-size-s: 1.25rem; /* 20px */
    --font-size-m: 1.5625rem; /* 25px */
    --font-size-l: 1.875rem; /* 30px */
    --font-size-xl: 3.125rem; /* 50px */
    --font-size-xxl: 4rem; /* 64px */
    --font-size-xxxl: 5rem; /* 80px */
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --font-size-xxl: 5rem; /* 80px */
    --font-size-xxxl: 7.5rem; /* 120px */
  }
}

::selection {
  background-color: var(--color-yellow);
  color: var(--color-purple-dark);
}

body {
  background-color: var(--color-yellow-light);
  color: var(--color-purple-dark);
  font-family: var(--font-family-default);
  font-size: var(--font-size-s);
  line-height: 1.2;
  min-height: var(--vh-100);
  display: flex;
  flex-direction: column;
}

.cursor {
  display: none;
}

/* * {
  cursor: none;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

@media (hover: hover) {
  body:hover .cursor {
    display: block;
  }
}

.cursor__normal {
  position: absolute;
  top: -2px;
  left: -1px;
  transform: scale(1);
  transition: transform 200ms var(--bezier-bounce);
}

.state--pointer .cursor__normal {
  transform: scale(0);
}

.cursor__pointer {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0);
  transition: transform 200ms var(--bezier-bounce);
}

.state--pointer .cursor__pointer {
  transform: scale(1);
}

.plyr__control {
  cursor: none !important;
}
*/

.main {
  flex: 1;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
}

.content-section {
  padding: 0 var(--page-padding) var(--page-padding);
}

.content-section__inner {
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  padding: var(--page-padding) 0;
}

.will-appear {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 800ms ease, transform 800ms ease;
}

.did-appear {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Richtext */

.richtext h2 {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
  margin-bottom: 0.6em;
  margin-top: 1.5em;
}

.richtext h3 {
  font-weight: bold;
  margin-bottom: 0.6em;
  margin-top: 1.5em;
}

.richtext h2:first-child,
.richtext h3:first-child {
  margin-top: 0;
}

.richtext p {
  margin-bottom: 1em;
}

.richtext a {
  text-decoration: underline;
  transition: color 100ms ease;
}

@media (hover: hover) {
  .richtext a:hover {
    color: var(--color-purple);
  }
}

.richtext ul {
  margin-bottom: 1em;
  padding-left: 1.1rem;
}

.richtext ul li {
  list-style-type: disc;
  padding-left: 0.5rem;
}

.richtext ol {
  margin-bottom: 1em;
  padding-left: 1.4rem;
}

.richtext ol li {
  list-style-type: decimal;
  padding-left: 4px;
}

.richtext strong {
  font-weight: bold;
}

.richtext i {
  font-style: italic;
}

.richtext h2:last-child,
.richtext h3:last-child,
.richtext p:last-child,
.richtext ul:last-child,
.richtext ol:last-child {
  margin-bottom: 0;
}

.button {
  background-color: var(--color-purple-dark);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  font-size: var(--font-size-xs);
  border-radius: 1000px;
  display: inline-block;
  transition: color 100ms ease, background-color 100ms ease;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-purple-medium);
  }
}

@media screen and (min-width: 700px) {
  .button {
    padding: 1rem 2.5rem;
  }
}

/* Responsive Image */

.responsive-image {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.responsive-image span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0ms ease;
}

.responsive-image.did-appear span {
  opacity: 0;
}

.responsive-image.contain span {
  background-size: contain;
}

.responsive-image img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0;
  transform: scale(1.1);
  transform-origin: center;
  transition: opacity 0ms ease, transform 0ms ease;
  will-change: opacity, transform;
}

.responsive-image.contain img {
  object-fit: contain;
}

.responsive-image.did-appear img {
  opacity: 1;
  transform: scale(1.001);
}

/* Header & Nav */

.header {
  padding: 0 var(--page-padding);
  position: sticky;
  top: 0;
  transform: translate(0, -100%, 0);
  z-index: 2;
}

.header.will-appear {
  transform: translate3d(0, -100%, 0);
  transition: transform 300ms ease;
}

.header.did-appear {
  transform: translate3d(0, 0, 0);
}

.header__inner {
  background-color: var(--color-purple-dark);
  color: var(--color-white);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  display: flex;
  align-items: stretch;
  z-index: 1;
  position: relative;
}

.header__home {
  padding: 1rem var(--page-padding);
  display: flex;
  align-items: center;
  font-size: var(--font-size-xs);
}

.header__logo {
  display: block;
  margin-right: 1rem;
}

.header__pre-nav {
  flex: 1;
}

.header__pre-nav-list {
  display: none;
}

.header__burger {
  position: relative;
  width: var(--header-height);
  height: var(--header-height);
  border-bottom-right-radius: var(--border-radius);
  background-color: var(--color-purple-medium);
  transition: background-color 200ms ease;
}

.state--nav-open .header__burger {
  background-color: var(--color-white);
}

.header__burger-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 1.5rem;
  height: 3px;
  background-color: var(--color-white);
  transition: background-color 100ms ease 100ms;
}

.state--nav-open .header__burger-inner {
  background-color: transparent;
  transition: background-color 100ms ease;
}

.header__burger-inner::before,
.header__burger-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  transition: transform 200ms var(--bezier-bounce-big);
}

.header__burger-inner::before {
  transform: translate3d(0, -6px, 0);
}

.state--nav-open .header__burger-inner::before {
  transform: translate3d(0, 0, 0) rotate(45deg);
  background-color: var(--color-purple-dark);
}

@media (hover: hover) {
  .header__burger:hover .header__burger-inner::before {
    transform: translate3d(0, -8px, 0);
  }

  .state--nav-open .header__burger:hover .header__burger-inner::before {
    transform: translate3d(0, 0, 0) rotate(35deg);
  }
}

.header__burger-inner::after {
  transform: translate3d(0, 6px, 0);
}

.state--nav-open .header__burger-inner::after {
  transform: translate3d(0, 0, 0) rotate(-45deg);
  background-color: var(--color-purple-dark);
}

@media (hover: hover) {
  .header__burger:hover .header__burger-inner::after {
    transform: translate3d(0, 8px, 0);
  }

  .state--nav-open .header__burger:hover .header__burger-inner::after {
    transform: translate3d(0, 0, 0) rotate(-35deg);
  }
}

.header__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vh-100);
  background-color: var(--color-purple-medium);
  transform: translate3d(0, -100%, 0);
  transition: transform 200ms ease;
  overflow: auto;
  padding: calc(var(--header-height) + var(--page-padding)) var(--page-padding)
    var(--page-padding);
}

.state--nav-open .header__overlay {
  transform: translate3d(0, 0, 0);
}

.header__overlay-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.header__overlay-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
  grid-auto-rows: max-content;
  align-items: flex-start;
}

.header__overlay-search {
  grid-column: span 12;
  background-color: var(--color-purple-dark);
  padding: var(--page-padding);
  border-radius: var(--border-radius);
  transform: translate3d(0, -200px, 0);
  transition: transform 300ms var(--bezier-bounce-big);
}

.state--nav-open .header__overlay-search {
  transform: translate3d(0, 0, 0);
}

.header__overlay-search-form {
  display: flex;
}

.header__overlay-search-input {
  flex: 1;
  border: none;
  appearance: none;
  font-family: var(--font-family-default);
  font-size: var(--font-size-s);
  padding: 1rem var(--border-radius);
  border-radius: 1000px 0 0 1000px;
  min-width: 0;
}

.header__overlay-search-input::placeholder {
  color: #d4d4d4;
}

.header__overlay-search-button {
  appearance: none;
  border: none;
  background-color: var(--color-purple-medium);
  color: var(--color-white);
  font-family: var(--font-family-title);
  font-size: var(--font-size-xs);
  border-radius: 0 1000px 1000px 0;
  padding: 1rem var(--border-radius);
  transition: background-color 100ms ease;
}

@media (hover: hover) {
  .header__overlay-search-button:hover {
    background-color: var(--color-purple);
  }
}
.header__overlay-nav-main,
.header__overlay-nav-secondary {
  grid-column: span 12;
  background-color: var(--color-purple-dark);
  padding: var(--border-radius);
  border-radius: var(--border-radius);
  transform: translate3d(0, -200px, 0);
  transition: transform 320ms var(--bezier-bounce-big);
}

.state--nav-open .header__overlay-nav-main,
.state--nav-open .header__overlay-nav-secondary {
  transform: translate3d(0, 0, 0);
}

.header__overlay-nav-secondary {
  transition: transform 340ms var(--bezier-bounce-big);
}

.header__overlay-nav-link {
  font-size: var(--font-size-l);
  font-family: var(--font-family-title);
  color: var(--color-white);
  line-height: 1.5;
  display: inline-block;
  hyphens: auto;
  transition: color 100ms ease;
}

.header__overlay-nav-secondary .header__overlay-nav-link {
  font-size: var(--font-size-l);
}

@media (hover: hover) {
  .header__overlay-nav-link:hover {
    color: var(--color-yellow);
  }
}

.header__overlay-footer {
  grid-column: span 12;
  padding-top: var(--page-padding);
  transform: translate3d(0, -200px, 0);
  transition: transform 360ms var(--bezier-bounce-big);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.state--nav-open .header__overlay-footer {
  transform: translate3d(0, 0, 0);
}

.header__overlay-service-nav-list {
  display: flex;
}

.header__overlay-service-nav-link {
  display: inline-block;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  margin-right: 1.25rem;
  transition: color 100ms ease;
}

@media (hover: hover) {
  .header__overlay-service-nav-link:hover {
    color: var(--color-yellow);
  }
}

.header__overlay-socials {
  display: flex;
}

.header__overlay-socials-link {
  display: inline-block;
  margin-left: 1rem;
}

@media screen and (min-width: 700px) {
  .header__overlay-search-button {
    font-size: var(--font-size-s);
  }
  .header__overlay-nav-link {
    font-size: var(--font-size-xl);
  }
}

@media screen and (min-width: 1200px) {
  .header__pre-nav-list {
    display: flex;
    justify-content: flex-end;
    height: 100%;
  }

  .header__pre-nav-link {
    margin-right: 2rem;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .header__pre-nav-link::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.75rem;
    background-color: var(--color-white);
    border-radius: 0.5rem 0.5rem 0 0;
    transition: transform 200ms var(--bezier-bounce-big);
  }

  @media (hover: hover) {
    .header__pre-nav-link:hover::after {
      transform: translate3d(0, -0.5rem, 0);
    }
  }

  .header__pre-nav-link span {
    transition: transform 200ms var(--bezier-bounce-big);
  }

  @media (hover: hover) {
    .header__pre-nav-link:hover span {
      transform: translate3d(0, -3px, 0);
    }
  }

  .header__overlay-nav-main {
    grid-column: span 7;
  }

  .header__overlay-nav-secondary {
    grid-column: span 5;
  }
}

/* Footer */

.footer {
  background-color: var(--color-purple-dark);
  color: var(--color-white);
  position: relative;
}

.footer__logos {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.footer__logo-frame {
  display: block;

  padding: var(--page-padding) var(--border-radius) var(--page-padding)
    var(--page-padding);
  border-bottom-right-radius: var(--border-radius);
}

.footer__logo {
  display: block;
  height: 3.75rem;
  max-width: 160px;
  object-fit: contain;
  object-position: top;
}

.footer__logo-link {
  display: block;
  padding: var(--page-padding);
}

.footer__navs {
  display: grid;
  gap: var(--page-padding);
  padding: var(--page-padding);
  grid-template-columns: repeat(12, 1fr);
}

.footer__nav {
  grid-column: span 12;
}

.footer__nav-link {
  color: var(--color-white);
  font-size: var(--font-size-s);
  transition: color 100ms ease;
}

@media (hover: hover) {
  .footer__nav-link:hover {
    color: var(--color-yellow);
  }
}

.footer__nav-service {
  background-color: var(--color-purple-medium);
  padding: var(--page-padding);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__nav-service-nav-list {
  display: flex;
}

.footer__nav-service-nav-link {
  font-size: var(--font-size-s);
  margin-right: 1.5rem;
  display: block;
  transition: color 100ms ease;
}

@media (hover: hover) {
  .footer__nav-service-nav-link:hover {
    color: var(--color-yellow);
  }
}

.footer__nav-socials {
  display: flex;
}

.footer__nav-socials-link {
  display: block;
  margin-left: 1rem;
}

.footer__nav-socials-link img {
  display: block;
}

@media screen and (min-width: 700px) {
  .footer__nav {
    grid-column: span 6;
  }
}

@media screen and (min-width: 1024px) {
  .footer__nav {
    grid-column: span 3;
  }

  .footer__nav-service {
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-right-radius: 0;
  }
}

/* Home */

.home__intro {
  min-height: calc(var(--vh-100) - var(--header-height));
  padding: var(--page-padding);
  display: flex;
}

.home__intro-slider {
  overflow: hidden;
  border-radius: var(--border-radius);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home__intro-slides {
  position: relative;
  flex: 1;
  background-color: var(--color-yellow);
  overflow: hidden;
  transition: background-color 900ms ease;
}

.home__intro-slides[data-type="rechteUndPflichten"] {
  background-color: var(--color-purple);
}

.home__intro-slides[data-type="inhaltsSeiten"] {
  background-color: #7816da;
}

.home__intro-slides::after {
  content: "";
  width: 100vh;
  height: 100vh;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  left: 100%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(255, 255, 255, 0.1);
}

.home__intro-slides[data-type="rechteUndPflichten"]::after,
.home__intro-slides[data-type="information"]::after,
.home__intro-slides[data-type="inhaltsSeiten"]::after {
  animation: circleTransition 1500ms ease forwards;
}

@keyframes circleTransition {
  0% {
    transform: translate3d(-30%, -50%, 0);
  }
  25% {
    transform: translate3d(-20%, -50%, 0);
  }
  100% {
    transform: translate3d(-30%, -50%, 0);
  }
}

.home__intro-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: var(--page-padding);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0ms linear 300ms;
}

.home__intro-slide.state--active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0ms linear;
}

.home__intro-label {
  font-size: var(--font-size-m);
  font-family: var(--font-family-title);
  position: absolute;
  top: var(--page-padding);
  left: var(--page-padding);
  transition: color 300ms ease;
}

.home__intro-label[data-type="rechteUndPflichten"],
.home__intro-label[data-type="inhaltsSeiten"] {
  color: var(--color-white);
}

.home__intro-label-container {
  display: inline-block;
  vertical-align: top;
  width: 0;
  overflow: hidden;
  transition: width 300ms ease;
}

.home__intro-label::before {
  content: "[ ";
}

.home__intro-label::after {
  content: " ]";
}

.home__intro-label-inner {
  display: none;
}

.home__intro-label-inner.state--active {
  display: inline;
  white-space: nowrap;
}

.home__intro-slide-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 90%;
  font-family: var(--font-family-title);
  font-size: 6vw;
  display: flex;
  flex-wrap: wrap;
  z-index: 1;
  line-height: 1.3;
}

.home__intro-slide[data-type="rechteUndPflichten"] .home__intro-slide-text,
.home__intro-slide[data-type="inhaltsSeiten"] .home__intro-slide-text {
  color: var(--color-white);
}

.home__intro-slide-text > span {
  display: inline-block;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 200ms ease var(--transition-delay),
    transform 300ms var(--bezier-bounce-big) var(--transition-delay);
}

.home__intro-slide.state--active .home__intro-slide-text > span {
  opacity: 1;
  transform: scale(1);
}

.home__intro-link-inner {
  display: inline-block;
  background-color: var(--color-purple);
  color: var(--color-white);
  border-radius: var(--border-radius);
  padding: 0.2vw 2vw;
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
}

.home__intro-slide[data-type="rechteUndPflichten"] .home__intro-link-inner {
  background-color: var(--color-purple-dark);
  color: var(--color-yellow);
}

.home__intro-slide[data-type="inhaltsSeiten"] .home__intro-link-inner {
  background-color: var(--color-yellow);
  color: var(--color-purple-dark);
}

@media (hover: hover) {
  .home__intro-link:hover .home__intro-link-inner {
    box-shadow: 10px 10px 0 var(--color-white);
    transform: translate3d(-10px, -10px, 0);
  }
}

.home__intro-pagination {
  position: absolute;
  right: var(--page-padding);
  bottom: var(--page-padding);
  display: flex;
}

.home__intro-pagination-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--color-white);
  margin: 0 3px;
  overflow: hidden;
  position: relative;
  transition: width 200ms ease;
}

.home__intro-pagination-dot.state--active {
  width: 100px;
}

.home__intro-pagination-dot::after {
  content: "";
  width: var(--progress);
  height: 100%;
  background-color: var(--color-purple-dark);
  position: absolute;
  left: 0;
  top: 0;
}

.home__intro-info {
  padding: var(--page-padding);
  background-color: var(--color-purple-dark);
  color: var(--color-white);
}

.home__intro-desc {
  margin-bottom: 1rem;
}

.home__intro-buttons {
  margin-bottom: -10px;
}

.home__intro-info .button {
  background-color: var(--color-purple);
  margin-right: 10px;
  margin-bottom: 10px;
}

@media (hover: hover) {
  .home__intro-info .button:hover {
    background-color: var(--color-white);
    color: var(--color-purple-dark);
  }
}

@media screen and (min-width: 1024px) {
  .home__intro-slide-text {
    width: 70%;
  }

  .home__intro-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .home__intro-desc {
    margin-bottom: 0;
  }

  .home__intro-info .button {
    margin-left: 10px;
    margin-right: 0;
  }

  @keyframes circleTransition {
    0% {
      transform: translate3d(-50%, -50%, 0);
    }
    25% {
      transform: translate3d(-40%, -50%, 0);
    }
    100% {
      transform: translate3d(-50%, -50%, 0);
    }
  }
}

/* Home Teaser */

.home__content {
  padding-top: 10vh;
}

.home__teaser-grid {
  padding: 0 var(--page-padding) 10vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
  align-items: center;
}

.home__teaser-image {
  grid-column: span 12;
}

.home__teaser-image-inner {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.home__teaser-info {
  grid-column-start: span 12;
  width: 90%;
  margin: 0 auto -4rem;
  position: relative;
  direction: ltr;
  background-color: var(--color-purple);
  color: var(--color-white);
  padding: var(--page-padding);
  border-radius: var(--border-radius);
  overflow: hidden;
  min-height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 1;
  transform: translate3d(0, -4rem, 0);
}

.home__teaser-info::before {
  content: "";
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate3d(-40%, -50%, 0);
  background-color: rgba(255, 255, 255, 0.1);
  z-index: -1;
  transition: transform 300ms ease;
}

@media (hover: hover) {
  .home__teaser-info:hover::before {
    transform: translate3d(-45%, -50%, 0);
  }
}

.home__teaser-title {
  width: 100%;
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  margin-bottom: 1rem;
}

.home__teaser-text {
  max-width: 450px;
  margin-bottom: 1rem;
}

.home__teaser-info .button {
  align-self: flex-end;
  font-family: var(--font-family-title);
}

@media screen and (min-width: 700px) {
  .home__teaser-grid {
    padding: 0 var(--page-padding) 20vh;
  }

  .home__teaser-grid.state--inverted {
    direction: rtl;
  }
}

@media screen and (min-width: 1024px) {
  .home__teaser-image {
    grid-column: span 6;
  }

  .home__teaser-image-inner {
    width: calc(100% + 4rem);
  }

  .home__teaser-info {
    grid-column: span 6;
    margin: 0 auto;
    width: 100%;
    transform: translate3d(0, 0, 0);
  }
}

@media screen and (min-width: 1400px) {
  .home__teaser-title {
    font-size: var(--font-size-xxl);
  }
}

/* Home News */

.home__news {
  overflow: hidden;
}

.home__news-grid {
  padding: 0 var(--page-padding) 10vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
  align-items: center;
}

.home__news-info {
  grid-column-start: span 12;
  width: 90%;
  margin: 0 auto;
  position: relative;
  direction: ltr;
  background-color: var(--color-purple);
  color: var(--color-white);
  padding: var(--page-padding);
  border-radius: var(--border-radius);
  overflow: hidden;
  min-height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 1;
  transition: color 200ms ease, opacity 800ms ease, transform 800ms ease;
}

.home__news-info::before {
  content: "";
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate3d(-40%, -50%, 0);
  background-color: rgba(255, 255, 255, 0.1);
  z-index: -1;
  transition: transform 300ms ease;
}

@media (hover: hover) {
  .home__news-info:hover::before {
    transform: translate3d(-45%, -50%, 0);
  }
}

.home__news-title {
  width: 100%;
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  margin-bottom: 1rem;
}

.home__news-text {
  max-width: 450px;
  width: 80%;
  margin-bottom: 1rem;
}

.home__news-info .button {
  font-family: var(--font-family-title);
  transition: opacity 200ms ease;
}

.home__news-teaser-wrapper {
  grid-column: span 12;
}

.home__news-slider {
  overflow: visible;
}

.home__news-slider-nav {
  padding: 10px 3rem;
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: center;
}

.home__news-slider--next,
.home__news-slider--prev {
  display: block;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-yellow);
  border-radius: 50%;
  position: relative;
  margin-right: 10px;
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
}

@media (hover: hover) {
  .home__news-slider--next:hover,
  .home__news-slider--prev:hover {
    box-shadow: 5px 5px 0 var(--color-purple-dark);
    transform: translate3d(-5px, -5px, 0);
  }
}

.home__news-slider--next::after,
.home__news-slider--prev::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-bottom: 3px solid var(--color-purple-dark);
  border-right: 3px solid var(--color-purple-dark);
}

.home__news-slider--next::after {
  transform: rotate(-45deg) translate3d(-1px, -8px, 0px);
}

.home__news-slider--prev::after {
  transform: rotate(135deg) translate3d(-1px, 6px, 0px);
}

.home__news-teaser-inner {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (hover: hover) {
  .home__news-teaser:hover .home__news-teaser-inner {
    box-shadow: 10px 10px 0 var(--color-purple-dark);
    transform: translate3d(-10px, -10px, 0);
  }
}

.home__news-teaser-image {
  padding-top: 120%;
  position: relative;
}

.home__news-teaser-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home__news-teaser-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background-color: var(--color-yellow);
  padding: var(--page-padding);
  transition: transform 150ms ease;
}

@media (hover: hover) {
  .home__news-teaser:hover .home__news-teaser-info {
    transform: translate3d(0, 0, 0);
  }
}

.home__news-teaser-label {
  font-size: var(--font-size-xs);
  margin-bottom: 0.5rem;
}

.home__news-teaser-title {
  margin-bottom: 3.5rem;
}

.home__news-teaser-arrow {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-purple-dark);
  position: relative;
  margin: 0 0 0 auto;
}

.home__news-teaser-arrow::after {
  content: "→";
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--color-white);
  transform: translate3d(-50%, -50%, 0);
}

@media screen and (min-width: 700px) {
  .home__news-grid {
    padding: 0 var(--page-padding) 20vh;
  }
}

@media screen and (min-width: 1024px) {
  .home__news-slider-nav {
    justify-content: flex-start;
  }

  .home__news-teaser-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
  }

  .home__news-info {
    min-height: 37vw;
    grid-column: span 5;
    margin: 0 auto;
    width: 100%;
    transform: translate3d(0, 0, 0);
  }

  .state--swiped .home__news-info {
    color: rgba(255, 255, 255, 0.2);
  }

  .state--swiped .home__news-info .button {
    opacity: 0.2;
  }

  .home__news-teaser-wrapper {
    grid-column: span 7;
  }

  .home__news-teaser-container {
    width: calc(100% + 4rem);
    transform: translate3d(-4rem, 0px, 0px);
    z-index: 1;
    position: relative;
  }

  .home__news-teaser-inner {
    padding-top: 170%;
  }

  .home__news-teaser-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0, 100%, 0);
  }
}

@media screen and (min-width: 1400px) {
  .home__news-slider-nav {
    display: none;
  }

  .home__news-info {
    min-height: 32vw;
  }

  .home__news-title {
    font-size: var(--font-size-xxl);
  }

  .home__news-teaser:last-child {
    margin-right: 0;
    display: block;
  }
}

@media screen and (min-width: 1600px) {
  .home__news-info {
    min-height: 500px;
  }
}

/* Home Events */

.home__events {
  min-height: var(--vh-100);
  background-color: var(--color-yellow);
  margin-bottom: 10vh;
  position: relative;
}

.home__events-bg {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.home__events-bg::before {
  content: "";
  display: block;
  height: 100vh;
  width: 100vh;
  position: sticky;
  top: 0;
  left: 0;
  transform: translate3d(-70%, 0, 0);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.home__events-grid {
  padding: 10vh var(--page-padding);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--page-padding);
  align-items: center;
  position: relative;
}

.home__events-info {
  grid-column: span 2;
  position: sticky;
  top: calc(var(--header-height) + var(--page-padding));
  margin-bottom: 3rem;
}

.home__events-title {
  font-size: var(--font-size-xxxl);
  font-family: var(--font-family-title);
  margin-bottom: 2rem;
}

.home__events-info .button {
  font-family: var(--font-family-title);
}

.home__events-list {
  position: relative;
  z-index: 1;
  grid-column: span 2;
}

.home__events-teaser {
  display: block;
  margin-bottom: 2rem;
  color: var(--color-white);
}

.home__events-teaser-inner {
  background-color: var(--color-purple);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
}

@media (hover: hover) {
  .home__events-teaser:hover .home__events-teaser-inner {
    box-shadow: 10px 10px 0 var(--color-purple-dark);
    transform: translate3d(-10px, -10px, 0);
  }
}

.home__events-teaser-image {
  grid-column: span 2;
  padding-top: 120%;
  position: relative;
  background-color: var(--color-purple-dark);
}

.home__events-teaser-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home__events-teaser-info {
  grid-column: span 4;
  padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home__events-teaser-type {
  font-size: var(--font-size-s);
  margin-bottom: 1.25rem;
}

.home__events-teaser-title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
  transition: transform 200ms var(--bezier-bounce);
  margin-bottom: 3rem;
}

@media (hover: hover) {
  .home__events-teaser:hover .home__events-teaser-title {
    transform: translate3d(0, -5px, 0);
  }
}

.home__events-teaser-date::before {
  content: "";
  width: 15px;
  height: 18px;
  background-image: url(/images/icon-clock.svg);
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;
  margin-right: 0.5rem;
  display: inline-block;
}

.home__events-teaser-location::before {
  content: "";
  width: 15px;
  height: 18px;
  background-image: url(/images/icon-poi.svg);
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;
  margin-right: 0.5rem;
  display: inline-block;
}

.home__events-teaser-icon {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  background-color: var(--color-purple-dark);
}

.home__events-teaser-icon img {
  transform: translate3d(-2px, 0, 0);
}

@media screen and (min-width: 700px) {
  .home__events-teaser-title {
    margin-bottom: 5rem;
  }
}

@media screen and (min-width: 1024px) {
  .home__events-bg::before {
    transform: translate3d(-50%, 0, 0);
  }
  .home__events {
    display: flex;
    flex-direction: column;
  }

  .home__events .container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .home__events-grid {
    flex: 1;
    align-items: flex-start;
  }

  .home__events-info {
    grid-column: span 1;
    min-height: calc(
      var(--vh-100) - var(--header-height) - var(--page-padding)
    );
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: var(--page-padding);
  }

  .home__events-list {
    grid-column: span 1;
    padding: 33vh 0;
  }
}

/* Search Page */

.search__header {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
  grid-auto-rows: max-content;
  align-items: flex-start;
  padding: var(--page-padding);
}

.search__header-search {
  grid-column: span 12;
  background-color: var(--color-purple-dark);
  padding: var(--page-padding);
  border-radius: var(--border-radius);
}

.search__header-search-form {
  display: flex;
}

.search__header-search-input {
  flex: 1;
  border: none;
  appearance: none;
  font-family: var(--font-family-default);
  font-size: var(--font-size-s);
  padding: 1rem var(--border-radius);
  border-radius: 1000px 0 0 1000px;
}

.search__header-search-input::placeholder {
  color: #d4d4d4;
}

.search__header-search-button {
  appearance: none;
  border: none;
  background-color: var(--color-purple-medium);
  color: var(--color-white);
  font-family: var(--font-family-title);
  font-size: var(--font-size-s);
  border-radius: 0 1000px 1000px 0;
  padding: 1rem var(--border-radius);
  transition: background-color 100ms ease;
}

@media (hover: hover) {
  .search__header-search-button:hover {
    background-color: var(--color-purple);
  }
}

.search__label {
  padding: 0 var(--page-padding) var(--page-padding);
  margin-bottom: 2rem;
}

.search__list {
  margin-bottom: calc(var(--page-padding) * -1);
}

.search__link {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
  padding: var(--page-padding);
  border-bottom: 1px solid var(--color-yellow-light);
  align-items: flex-start;
  transition: color 100ms ease;
}

@media (hover: hover) {
  .search__link:hover {
    color: var(--color-purple);
  }
}

.search__item:first-child .search__link {
  border-top: 1px solid var(--color-yellow-light);
}

.search__link-count {
  grid-column: span 1;
  font-size: var(--font-size-xs);
}

.search__link-title {
  grid-column: span 11;
  font-family: var(--font-family-title);
  font-size: var(--font-size-l);
  hyphens: auto;
}

.search__link-type-wrapper {
  grid-column: span 12;
}

.search__link-type {
  border: 1px solid var(--color-purple-dark);
  color: var(--color-purple-dark);
  padding: 5px 1rem;
  font-size: 10px;
  border-radius: 5px;
  display: inline-block;
  transition: color 100ms ease, background-color 100ms ease;
}

.search__link-type.state--rechteUndPflichten {
  border: 1px solid var(--color-purple);
  background-color: var(--color-purple);
  color: var(--color-white);
}

.search__link-type.state--information {
  border: 1px solid var(--color-yellow);
  background-color: var(--color-yellow);
  color: var(--color-purple-dark);
}

@media screen and (min-width: 1024px) {
  .search__link-count {
    grid-column: span 1;
  }
  .search__link-title {
    grid-column: span 8;
  }

  .search__link-type-wrapper {
    grid-column: span 3;
    display: flex;
    justify-content: flex-end;
  }
}

/* Page Intro Komponente */

.page-intro {
  padding: var(--page-padding);
}

.page-intro__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-xxxl);
  color: var(--color-purple);
  margin-bottom: 4rem;
  line-height: 1;
  hyphens: auto;
}

.page-intro__title.state--bg-purple,
.page-intro__title.state--bg-yellow {
  padding: 4rem var(--page-padding) 3rem;
  min-height: 200px;
  margin-top: calc(calc(var(--page-padding) + var(--border-radius)) * -1);
  margin-bottom: 0;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  overflow: hidden;
}

.page-intro__title.state--bg-purple {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.page-intro__title.state--bg-yellow {
  background-color: var(--color-yellow);
  color: var(--color-purple-dark);
}

.page-intro__title.state--bg-purple::before,
.page-intro__title.state--bg-yellow::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(50%, -50%, 0);
  background-color: rgba(255, 255, 255, 0.1);
  width: 60%;
  padding-top: 60%;
  border-radius: 50%;
  z-index: -1;
}

.page-intro__text {
  max-width: 1000px;
}

@media screen and (min-width: 700px) {
  .page-intro__title {
    margin-bottom: 7rem;
  }

  .page-intro__title.state--bg-purple,
  .page-intro__title.state--bg-yellow {
    min-height: 400px;
  }
}

/* Card List */

.card-list {
}

.card-list__header {
  display: flex;
  align-items: flex-start;
  padding: 0 var(--page-padding) var(--page-padding);
}

.card-list__header-categories {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.card-list__header-category {
  margin-right: 10px;
  margin-bottom: 10px;
}

.card-list__header-category.state--active {
  background-color: var(--color-purple);
}

.card-list__header-toggle {
  padding: 10px;
  position: relative;
}

.card-list__header-toggle img {
  transform: scale(1);
  transition: transform 200ms var(--bezier-bounce-big);
}

.card-list__header-toggle img:nth-child(2) {
  transform: scale(0);
  position: absolute;
  top: 12px;
  left: 11px;
}

.state--list .card-list__header-toggle img:nth-child(1) {
  transform: scale(0);
}

.state--list .card-list__header-toggle img:nth-child(2) {
  transform: scale(1);
}

.card-list__cards {
  padding: var(--page-padding);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
}

.state--list .card-list__cards {
  display: none;
}

.card-list__card {
  grid-column: span 12;
}

.card-list__card.state--filtered {
  display: none;
}

.card-list__card.will-appear {
  transform: translate3d(0, 0, 0) scale(0.95);
  transition: opacity 300ms ease, transform 200ms var(--bezier-bounce);
}

.card-list__card.did-appear {
  transform: translate3d(0, 0, 0) scale(1);
}

.card-list__card-inner {
  height: 100%;
  border-radius: var(--border-radius);
  padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
}

@media (hover: hover) {
  .card-list__card:hover .card-list__card-inner {
    box-shadow: 10px 10px 0 var(--color-purple-dark);
    transform: translate3d(-10px, -10px, 0);
  }
}

.state--rights .card-list__card-inner {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.state--information .card-list__card-inner {
  background-color: var(--color-yellow);
  color: var(--color-purple-dark);
}

.card-list__category {
  margin-bottom: 0.5rem;
  font-size: var(--font-size-s);
}

.card-list__title {
  margin-bottom: 2.5rem;
  font-size: var(--font-size-l);
  font-family: var(--font-family-title);
  hyphens: auto;
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
}

@media (hover: hover) {
  .card-list__card:hover .card-list__title {
    transform: translate3d(0, -5px, 0);
  }
}

.card-list__list .card-list__title {
  margin-bottom: 0;
}

.card-list__subtitle {
  font-size: var(--font-size-s);
}

.card-list__age-groups {
  margin-top: 0.5rem;
  display: flex;
}

.card-list__age-group {
  margin-right: 5px;
  display: block;
  font-size: var(--font-size-xs);
  padding: 10px;
  color: var(--color-yellow);
  background-color: rgba(76, 37, 86, 0.3);
  border-radius: 10px;
}

.card-list__age-group.state--active {
  background-color: rgba(76, 37, 86, 1);
}

.card-list__list {
  display: none;
}

.state--list .card-list__list {
  display: block;
}

.card-list__list-letter {
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  color: var(--color-purple);
  padding: var(--page-padding);
}

.card-list__item {
  display: block;
}

.card-list__item.state--filtered {
  display: none;
}

.card-list__item-inner {
  border-bottom: 1px solid #f4eed3;
  padding: var(--page-padding);
}

.card-list__list-items li:first-child .card-list__item-inner {
  border-top: 1px solid #f4eed3;
}

.card-list__list .card-list__title {
  transition: transform 200ms var(--bezier-bounce), color 100ms ease;
}

@media (hover: hover) {
  .card-list__item:hover .card-list__title {
    transform: translate3d(0, -5px, 0);
    color: var(--color-purple);
  }
}

@media screen and (min-width: 700px) {
  .card-list__card {
    grid-column: span 6;
    min-height: 300px;
  }

  .card-list__card.state--rights {
    min-height: 450px;
  }

  .card-list__item-inner {
    display: flex;
    justify-content: space-between;
  }

  .card-list__category {
    margin-bottom: 1.5rem;
  }

  .card-list__list .card-list__title {
    margin-bottom: 0;
  }

  .card-list__age-groups {
    margin-top: 1.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .card-list__card {
    grid-column: span 4;
  }
}

@media screen and (min-width: 1400px) {
  .card-list__card {
    grid-column: span 3;
  }
}

/* Card Detail Pages */

.card-detail__header {
  padding: 0 var(--page-padding) var(--page-padding);
}

.card-detail__categories {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.card-detail__category {
  padding: 1rem 2.5rem;
  font-size: var(--font-size-xs);
  border-radius: 1000px;
  display: inline-block;
  background-color: var(--color-white);
  color: var(--color-purple-dark);
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

.card-detail__info {
  background-color: var(--color-purple);
  color: var(--color-white);
  padding: var(--page-padding);
  border-radius: var(--border-radius);
}

.card-detail__age-groups {
  display: flex;
}

.card-detail__age-group {
  margin-right: 5px;
  display: block;
  font-size: var(--font-size-xs);
  padding: 10px;
  color: var(--color-yellow);
  background-color: rgba(76, 37, 86, 0.3);
  border-radius: 10px;
}

.card-detail__age-group.state--active {
  background-color: rgba(76, 37, 86, 1);
}

.card-detail__subtitle {
  margin-bottom: 1rem;
  font-size: var(--font-size-xs);
}

.card-detail__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
  padding: 0 var(--page-padding);
}

.card-detail__grid-label {
  grid-column: span 12;
  font-size: var(--font-size-xs);
  margin-bottom: 2rem;
}

@media screen and (min-width: 700px) {
  .card-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .card-detail__categories {
    margin-bottom: 0;
  }
}

/* Richtext Component */

.richtext-component {
  padding: var(--page-padding);
}

.richtext-component__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Media Component */

.media-component {
  max-width: 740px;
  margin: 0 auto;
  padding: var(--page-padding);
}

.media-component__wrapper .responsive-image,
.media-component__wrapper .plyr--video {
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
}

.media-component__caption {
  font-size: var(--font-size-xs);
  margin-top: 5px;
}

/* Link Liste */

.link-list {
  padding: 5rem 0 var(--page-padding);
}

.link-list:last-child {
  margin-bottom: calc(var(--page-padding) * -2);
}

.link-list__title {
  padding: 0 var(--page-padding) var(--page-padding);
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
}

.link-list__link {
  padding: var(--page-padding);
  border-bottom: 1px solid var(--color-yellow-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: none;
  font-size: var(--font-size-m);
  transition: color 100ms ease;
}

.link-list__item:first-child .link-list__link {
  border-top: 1px solid var(--color-yellow-light);
}

@media (hover: hover) {
  .link-list__link:hover {
    color: var(--color-purple);
  }
}

.link-list__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-purple-dark);
  border-radius: 50%;
  overflow: hidden;
  transition: background-color 100ms ease;
}

@media (hover: hover) {
  .link-list__link:hover .link-list__icon {
    background-color: var(--color-purple);
  }
}

.link-list__icon img {
  width: 100%;
  display: block;
  height: 100%;
  object-fit: contain;
}

@media screen and (min-width: 700px) {
  .link-list__icon {
    width: 40px;
    height: 40px;
  }
}

/* Link Liste */

.accordion {
  padding: 5rem 0 var(--page-padding);
}

.accordion:last-child {
  margin-bottom: calc(var(--page-padding) * -2);
}

.accordion__title {
  padding: 0 var(--page-padding) var(--page-padding);
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
}

.accordion__item {
  border-bottom: 1px solid var(--color-yellow-light);
}

.accordion__item:first-child {
  border-top: 1px solid var(--color-yellow-light);
}

.accordion__item-header {
  display: flex;
  padding: var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-m);
  transition: color 100ms ease;
}

.jobs-list .accordion__item-header {
  font-family: var(--font-family-title);
}

@media (hover: hover) {
  .accordion__item-header:hover {
    color: var(--color-purple);
  }
}

.accordion__item-title {
  flex: 1;
}

.accordion__item-label {
  font-family: var(--font-family-default);
  font-size: var(--font-size-xs);
  display: block;
  margin-top: 0.5rem;
}

.accordion__item-icon {
  position: relative;
  display: block;
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;
  background-color: var(--color-purple-dark);
  border-radius: 50%;
  overflow: hidden;
  transition: background-color 100ms ease;
}

@media (hover: hover) {
  .accordion__item-header:hover .accordion__item-icon {
    background-color: var(--color-purple);
  }
}

.accordion__item-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 2.75px;
  border-radius: 1px;
  background-color: var(--color-yellow);
  transform: translate3d(-50%, -50%, 0);
}

.accordion__item-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1rem;
  width: 2.75px;
  border-radius: 1px;
  background-color: var(--color-yellow);
  transform: translate3d(-50%, -50%, 0);
  transition: transform 200ms var(--bezier-bounce-big);
}

.state--item-open .accordion__item-icon::before {
  transform: translate3d(-50%, -50%, 0) scaleY(0);
}

.accordion__item-content {
  height: 0;
  overflow: hidden;
  transition: height 200ms var(--bezier-bounce);
}

.accordion__item-inner {
  padding: 0 var(--page-padding) var(--page-padding);
}

.accordion__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--page-padding);
}

.accordion__grid-content {
  grid-column: span 12;
}

.accordion__grid-content .button {
  margin-top: 1.5rem;
}

.accordion__grid-side {
  grid-column: span 12;
}

.accordion__contact {
  background-color: var(--color-purple);
  border-radius: var(--border-radius);
  padding: var(--page-padding);
  color: var(--color-white);
}

.accordion__contact-title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
  margin-bottom: 1.5rem;
}

.accordion__contact-text a[href^="tel"],
.accordion__contact-text a[href^="mailto"] {
  position: relative;
  padding-left: 2rem;
  transition: color 200ms ease;
}

@media (hover: hover) {
  .accordion__contact-text a[href^="tel"]:hover,
  .accordion__contact-text a[href^="mailto"]:hover {
    color: var(--color-yellow);
  }
}

.accordion__contact-text a[href^="tel"]::before,
.accordion__contact-text a[href^="mailto"]::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: contain;
  position: absolute;
  left: 0;
  top: -2px;
}

.accordion__contact-text a[href^="tel"]::before {
  background-image: url("/images/icon-phone.svg");
}

.accordion__contact-text a[href^="mailto"]::before {
  background-image: url("/images/icon-email.svg");
}

.accordion__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vh-100);
  background-color: rgba(244, 238, 211, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: var(--page-padding);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.accordion__overlay.state--active {
  opacity: 1;
  pointer-events: auto;
}

.accordion__overlay-inner {
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--page-padding);
  max-width: 600px;
  width: 100%;
}

.accordion__overlay-close {
  position: sticky;
  top: var(--page-padding);
  right: var(--page-padding);
  background-color: var(--color-purple-dark);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: rotate(45deg);
  transition: background-color 200ms ease;
  display: block;
  margin: 0 0 0 auto;
}

@media (hover: hover) {
  .accordion__overlay-close:hover {
    background-color: var(--color-purple-medium);
    cursor: pointer;
  }
}

@media screen and (min-width: 700px) {
  .accordion__item-icon {
    width: 40px;
    height: 40px;
  }

  .accordion__grid-content {
    grid-column: span 8;
  }

  .accordion__grid-side {
    grid-column: span 4;
  }
}

/* Form Component */

.form {
  padding: var(--page-padding);
  border-top: 1px solid var(--color-yellow-light);
  border-bottom: 1px solid var(--color-yellow-light);
}

.form.state--no-border {
  border-top: none;
  border-bottom: none;
}

.form__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
}

.form__form {
  max-width: 690px;
  margin: 4rem auto;
}

.form__form label {
  display: block;
  font-size: var(--font-size-xs);
  margin-bottom: 0.5rem;
}

.form__form input[type="text"],
.form__form input[type="email"],
.form__form input[type="tel"],
.form__form input[type="number"],
.form__form input[type="date"] {
  --border-color: var(--color-purple-dark);

  display: block;
  width: 100%;
  appearance: none;
  border: 1px solid var(--border-color);
  padding: 14px 10px;
  font-size: var(--font-size-m);
  font-family: var(--font-family-default);
  color: var(--color-purple-dark);
  border-radius: 5px;
  margin-bottom: 2.5rem;
  transition: transform 200ms var(--bezier-bounce-big),
    box-shadow 200ms var(--bezier-bounce-big);
}

.form__form input[type="text"]::placeholder,
.form__form input[type="email"]::placeholder,
.form__form input[type="tel"]::placeholder,
.form__form input[type="number"]::placeholder,
.form__form input[type="date"]::placeholder {
  color: #d4d4d4;
}

.form__form input[type="text"]:focus,
.form__form input[type="email"]:focus,
.form__form input[type="tel"]:focus,
.form__form input[type="number"]:focus,
.form__form input[type="date"]:focus {
  box-shadow: 5px 5px 0 var(--border-color);
  transform: translate3d(-5px, -5px, 0);
}

.form__form select {
  display: block;
  width: 100%;
  appearance: none;
  border: 1px solid var(--color-purple-dark);
  padding: 14px 10px;
  font-size: var(--font-size-m);
  font-family: var(--font-family-default);
  color: var(--color-purple-dark);
  border-radius: 5px;
  margin-bottom: 2.5rem;
}

.form__form button[type="submit"] {
  font-size: var(--font-size-s);
  font-family: var(--font-family-default);
}

/* News List Component */

.news-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: var(--page-padding);
  gap: var(--page-padding);
}

.news-list__item {
  grid-column: span 2;
}

.news-list__item-inner {
  background-color: var(--color-yellow);
  color: var(--color-purple-dark);
  overflow: hidden;
  border-radius: var(--border-radius);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
}

@media (hover: hover) {
  .news-list__item:hover .news-list__item-inner {
    box-shadow: 10px 10px 0 var(--color-purple-dark);
    transform: translate3d(-10px, -10px, 0);
  }
}

.news-list__item-image-wrapper {
  padding-top: 60%;
  position: relative;
  grid-column: span 2;
}

.news-list__item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-list__item-info {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--page-padding);
}

.news-list__item-date {
  font-size: var(--font-size-s);
  margin-bottom: 1.25rem;
}

.news-list__item-title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
  transition: transform 200ms var(--bezier-bounce);
  margin-bottom: 2rem;
}

@media (hover: hover) {
  .news-list__item:hover .news-list__item-title {
    transform: translate3d(0, -5px, 0);
  }
}

@media screen and (min-width: 700px) {
  .news-list__item-image-wrapper {
    padding-top: 120%;
    position: relative;
    grid-column: span 1;
  }

  .news-list__item-info {
    grid-column: span 1;
  }
}

@media screen and (min-width: 1024px) {
  .news-list__item {
    grid-column: span 1;
  }
}

/* Events List Component */

.events-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: var(--page-padding);
  gap: var(--page-padding);
}

.events-list__item {
  grid-column: span 2;
}

.events-list__item-inner {
  background-color: var(--color-purple);
  color: var(--color-white);
  overflow: hidden;
  border-radius: var(--border-radius);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  transition: transform 200ms var(--bezier-bounce),
    box-shadow 200ms var(--bezier-bounce);
}

@media (hover: hover) {
  .events-list__item:hover .events-list__item-inner {
    box-shadow: 10px 10px 0 var(--color-purple-dark);
    transform: translate3d(-10px, -10px, 0);
  }
}

.events-list__item-image-wrapper {
  padding-top: 60%;
  position: relative;
  grid-column: span 2;
}

.events-list__item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.events-list__item-info {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--page-padding);
}

.events-list__item-type {
  font-size: var(--font-size-s);
  margin-bottom: 1.25rem;
}

.events-list__item-title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
  transition: transform 200ms var(--bezier-bounce);
  margin-bottom: 3rem;
}

@media (hover: hover) {
  .events-list__item:hover .events-list__item-title {
    transform: translate3d(0, -5px, 0);
  }
}

.events-list__date::before {
  content: "";
  width: 15px;
  height: 18px;
  background-image: url(/images/icon-clock.svg);
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;
  margin-right: 0.5rem;
  display: inline-block;
}

.events-list__location::before {
  content: "";
  width: 15px;
  height: 18px;
  background-image: url(/images/icon-poi.svg);
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;
  margin-right: 0.5rem;
  display: inline-block;
}

.event-list__icon {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  background-color: var(--color-purple-dark);
}

.event-list__icon img {
  transform: translate3d(-2px, 0, 0);
}

@media screen and (min-width: 700px) {
  .events-list__item-image-wrapper {
    padding-top: 120%;
    position: relative;
    grid-column: span 1;
  }

  .events-list__item-info {
    grid-column: span 1;
  }

  .events-list__item-title {
    margin-bottom: 5rem;
  }
}

@media screen and (min-width: 1024px) {
  .events-list__item {
    grid-column: span 1;
  }
}

/* Podcast Teaser */

.podcast-teaser {
  padding: var(--page-padding);
}

.podcast-teaser__inner {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--color-purple-dark);
  border-radius: var(--border-radius);
  padding: var(--page-padding);
  color: var(--color-white);
}

.podcast-teaser__image {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 1rem;

  & > .responsive-image {
    width: 100%;
  }
}

.podcast-teaser__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-m);
  margin-bottom: 0.5rem;
}

.podcast-teaser__text {
  font-size: var(--font-size-xs);
  margin-bottom: 2rem;
}

.podcast-teaser__audio-wrapper {
  background-color: var(--color-purple);
  padding: 0.5rem;
  border-radius: 1000px;

  .plyr--audio .plyr__controls {
    border-radius: 1000px;
    background-color: rgba(255, 255, 255, 0.8);
  }
}

@media screen and (min-width: 700px) {
  .podcast-teaser__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--page-padding);
    align-items: flex-start;
  }

  .podcast-teaser__image {
    grid-column: span 1;
  }

  .podcast-teaser__info {
    grid-column: span 2;
  }
}