/* =========================
   RESET
========================= */

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

/* Scrollbars überall ausblenden */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* =========================
   VARIABLES
========================= */

:root {
  --color-info: #ff3b57;
  --color-calendar: #3f51ff;
  --color-media: #f783c5;

  --bg: #fff;

  --font-heading: "neue-haas-grotesk-display", sans-serif;
  --font-cms: "Times New Roman", Times, serif;

  --page-top: 5rem;
  --page-padding: 1rem;
  --grid-gap: 1.5rem;

  --border-width: 1px;

  --headline-size: 1rem;
  --text-size: 1rem;
  --large-title-size: 2.5rem;

  --headline-line-height: 1;
  --text-line-height: 0.95;
  --large-title-line-height: 0.8;

  --row-padding-top: 0.5rem;
  --row-padding-bottom: 0.5rem;

  --fixed-header-height: calc(
    var(--headline-size) * var(--headline-line-height) + 0.35rem + var(--border-width)
  );

  --mobile-page-top: 5rem;
  --mobile-page-padding: 0.75rem;
  --mobile-row-gap: 0.85rem;
  --mobile-cell-gap: 0.75rem;

  --content-bottom-safe: calc(var(--audio-name-height, 50vh) + 1rem);
}

/* =========================
   BASE
========================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

html {
  font-size: 25px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
}

@media screen and (min-width: 769px) {
  html {
    scrollbar-gutter: stable;
  }
}

@media screen and (max-width: 820px) {
  html {
    font-size: calc(18px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1800px) {
  html {
    font-size: calc(12px + 6 * ((100vw - 320px) / 680));
  }
}

/* =========================
   HEADER / MENU
========================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100000;
  pointer-events: none;
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 0.5rem;

  padding: 1rem;

  pointer-events: auto;
}

.menu__items {
  display: flex;
  gap: 0.5rem;
}

.menu__item,
.menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-heading);
  font-weight: 900;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;

  padding: 0.2rem 0.8rem;

  border: none;
  border-radius: 999px;

  color: #fff;
  text-decoration: none;
  white-space: nowrap;

  transform-origin: center;

  transition:
    transform 0.25s ease,
    opacity 0.3s ease;
}

.menu__toggle {
  background: #000;
  cursor: pointer;
}

.menu__toggle:hover {
  transform: scale(1.08);
}

.is-info {
  background: var(--color-info);
}

.is-kalender {
  background: var(--color-calendar);
}

.is-medien {
  background: var(--color-media);
}

/* Menübutton je Seite */

.page-info .menu__toggle {
  background: var(--color-info);
}

.page-kalender .menu__toggle {
  background: var(--color-calendar);
}

.page-medien .menu__toggle {
  background: var(--color-media);
}

/* Aktiver Menüpunkt schwarz */

.page-info .menu__item.is-info {
  background: #000;
}

.page-kalender .menu__item.is-kalender {
  background: #000;
}

.page-medien .menu__item.is-medien {
  background: #000;
}

/* Menu Animation Desktop */

.menu__item {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.menu.is-open .menu__item {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.menu.is-open .menu__item:hover {
  transform: translateX(0) scale(1.08);
}

.menu__item:nth-child(1) {
  transition-delay: 0.05s;
}

.menu__item:nth-child(2) {
  transition-delay: 0.1s;
}

.menu__item:nth-child(3) {
  transition-delay: 0.15s;
}

/* =========================
   SHARED TYPOGRAPHY
========================= */

.info-heading,
.info-fixed-heading,
.info-subheading,
.calendar-header__cell,
.media-header__cell,
.calendar-cell::before,
.media-cell::before {
  font-family: var(--font-heading);
  font-weight: 900;
  font-style: normal;
  font-size: var(--headline-size);
  line-height: var(--headline-line-height);
}

.info-text,
.calendar-cell,
.calendar-subtitle,
.media-cell {
  font-family: var(--font-cms);
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-size);
  line-height: var(--text-line-height);
}

/* CMS Links */

.info-text a,
.calendar-cell a,
.calendar-subtitle a,
.media-cell a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.08em;
  transition: opacity 0.2s ease;
}

.info-text a:hover,
.calendar-cell a:hover,
.calendar-subtitle a:hover,
.media-cell a:hover {
  opacity: 0.55;
}

/* =========================
   SHARED SUBPAGE BASE
========================= */

.info-page-new,
.subpage {
  height: 100vh;
  overflow: hidden;

  padding-top: var(--page-top);

  background: var(--bg);
}

.info-page-new {
  color: var(--color-info);
}

.subpage--calendar {
  color: var(--color-calendar);
}

.subpage--media {
  color: var(--color-media);
}

/* =========================
   INFO PAGE DESKTOP
========================= */

.info-fixed-header {
  position: fixed;
  top: var(--page-top);
  left: var(--page-padding);
  right: var(--page-padding);
  z-index: 100;

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gap);

  background: var(--bg);
  color: var(--color-info);

  border-bottom: var(--border-width) solid currentColor;
}

.info-fixed-heading {
  color: currentColor;

  margin: 0;
  padding: 0 0 0.35rem 0;

  border-bottom: none;
}

.info-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gap);

  height: calc(100vh - var(--page-top));

  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  padding-top: var(--fixed-header-height);
}

.info-scroll-column {
  min-height: 0;
  height: 100%;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding-right: 0.4rem;
}

.info-scroll-inner {
  min-height: 100%;

  padding-top: 0.5rem;
  padding-bottom: var(--content-bottom-safe);
}

.info-text {
  color: currentColor;
}

.info-text p {
  margin-bottom: 0.8rem;
}

.info-text p:last-child {
  margin-bottom: 0;
}

.info-image {
  width: 100%;
  margin: 1rem 0;
}

.info-image img {
  display: block;
  width: 100%;
  height: auto;
}

.info-contact {
  margin-top: 1.25rem;
}

.info-subheading {
  color: currentColor;

  margin: 0 0 0.5rem 0;
  padding: 0 0 0.35rem 0;

  border-bottom: var(--border-width) solid currentColor;
}

/* =========================
   CALENDAR DESKTOP
========================= */

.calendar-table {
  height: calc(100vh - var(--page-top));

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: var(--page-padding);

  background: var(--bg);
}

.calendar-header {
  position: fixed;
  top: var(--page-top);
  left: var(--page-padding);
  right: var(--page-padding);
  z-index: 100;

  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  column-gap: var(--grid-gap);

  background: var(--bg);
  color: var(--color-calendar);

  border-bottom: var(--border-width) solid currentColor;
}

.calendar-header__cell {
  color: currentColor;
  padding: 0 0 0.35rem 0;
}

.calendar-list {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: var(--content-bottom-safe);
}

.calendar-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  column-gap: var(--grid-gap);

  padding: var(--row-padding-top) 0 var(--row-padding-bottom) 0;

  border-bottom: var(--border-width) solid currentColor;
}

.calendar-list .calendar-row:last-of-type {
  border-bottom: none;
}

.calendar-cell {
  color: currentColor;
}

.calendar-cell p {
  margin: 0;
}

.calendar-cell p + p {
  margin-top: 0.15rem;
}

.calendar-piece {
  color: currentColor;

  font-family: var(--font-cms);
  font-weight: 400;
  font-style: normal;
  font-size: var(--large-title-size);
  line-height: var(--large-title-line-height);

  margin: 0;
  padding: 0;
}

.calendar-subtitle {
  margin-top: 0.15rem;
  color: currentColor;
}

.calendar-subtitle p {
  margin: 0;
}

/* =========================
   MEDIA DESKTOP
========================= */

.media-table {
  height: calc(100vh - var(--page-top));

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: var(--page-padding);

  background: var(--bg);
}

.media-header {
  position: fixed;
  top: var(--page-top);
  left: var(--page-padding);
  right: var(--page-padding);
  z-index: 100;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 0.85fr;
  column-gap: var(--grid-gap);

  background: var(--bg);
  color: var(--color-media);

  border-bottom: var(--border-width) solid currentColor;
}

.media-header__cell {
  color: currentColor;
  padding: 0 0 0.35rem 0;
}

.media-list {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: var(--content-bottom-safe);
}

.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 0.85fr;
  column-gap: var(--grid-gap);

  padding: var(--row-padding-top) 0 var(--row-padding-bottom) 0;

  border-bottom: var(--border-width) solid currentColor;
}

.media-list .media-row:last-of-type {
  border-bottom: none;
}

.media-cell {
  color: currentColor;
}

.media-cell p {
  margin: 0;
}

.media-cell p + p {
  margin-top: 0.15rem;
}

.media-image {
  width: 100%;
  margin: 0;
}

.media-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   MEDIA VIDEO PREVIEW
========================= */

.media-row[data-media-type] {
  cursor: pointer;
}

.media-row[data-media-type]:hover {
  opacity: 0.55;
}

.media-image--video {
  position: relative;
}

.media-video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: currentColor;
  opacity: 0.12;
}

.media-play {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 0;
  height: 0;

  transform: translate(-42%, -50%);

  border-top: 1.35rem solid transparent;
  border-bottom: 1.35rem solid transparent;
  border-left: 2.1rem solid var(--color-media);

  pointer-events: none;
}

/* =========================
   MEDIA LIGHTBOX
========================= */

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.75rem;

  background: rgba(255, 255, 255, 0.75);

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.25s ease;
}

.media-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.media-lightbox__content {
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
}

.media-lightbox__content img,
.media-lightbox__content video,
.media-lightbox__content iframe {
  display: block;

  max-width: 90vw;
  max-height: 90vh;

  width: auto;
  height: auto;
}

.media-lightbox__content iframe {
  width: 80vw;
  height: 45vw;
  max-height: 80vh;
  border: 0;
}

.media-lightbox__close {
  display: none;
}

body.media-lightbox-open {
  overflow: hidden;
}

/* =========================
   MOBILE
========================= */

@media screen and (max-width: 768px) {
  :root {
    --headline-size: 1.5rem;
    --text-size: 1.5rem;
    --large-title-size: 3rem;

    --mobile-page-top: 5rem;
    --mobile-page-padding: 0.75rem;
    --mobile-row-gap: 0.85rem;
    --mobile-cell-gap: 0.75rem;

    --content-bottom-safe: calc(var(--audio-name-height, 40vh) + 1rem);
  }

  html,
  body {
    overflow-x: hidden;
  }

  /* =========================
     MOBILE MENU
  ========================= */

  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100000;
    pointer-events: none;
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: block;

    padding: 0;

    pointer-events: none;
  }

  .menu.is-open {
    pointer-events: auto;
  }

  .menu__toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100002;

    font-size: 2.5rem;
    line-height: 1;

    padding: 0.3rem 1.2rem;

    pointer-events: auto;
  }

  .menu__items {
    position: fixed;
    inset: 0;
    z-index: 100001;

    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    gap: 1rem;

    padding-top: 10rem;

    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);

    transition:
      opacity 0.3s ease,
      transform 0.3s ease;

    background: rgba(255, 255, 255, 0.8);
  }

  .menu.is-open .menu__items {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .menu__item {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;

    font-size: 3rem;
    line-height: 1;

    padding: 0.3rem 1.4rem;
  }

  .menu.is-open .menu__item {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .menu__toggle:hover {
    transform: scale(1.08);
  }

  .menu.is-open .menu__item:hover {
    transform: translateY(0) scale(1.08);
  }

  /* =========================
     MOBILE PAGE BASE
  ========================= */

  .info-page-new,
  .subpage {
    width: 100%;
    height: auto;
    overflow: visible;

    padding-top: var(--mobile-page-top);
  }

  /* =========================
     INFO MOBILE
  ========================= */

  .info-fixed-header {
    position: static;

    display: block;
    width: 100%;

    padding: var(--mobile-page-padding);
    padding-bottom: 0;

    background: transparent;
    border-bottom: none;
  }

  .info-fixed-heading {
    display: block;
    width: 100%;

    margin: 0 0 0.25rem 0;
    padding: 0 0 0.2rem 0;

    border-bottom: var(--border-width) solid currentColor;
  }

  .info-fixed-heading--vita {
    display: none;
  }

  .info-content-grid {
    display: block;
    width: 100%;
    height: auto;

    padding: var(--mobile-page-padding);
    padding-top: 0;
    padding-bottom: var(--content-bottom-safe);

    overflow: visible;
  }

  .info-scroll-column {
    display: block;
    width: 100%;
    max-width: none;

    height: auto;
    overflow: visible;

    padding: 0;
    margin: 0;
  }

  .info-scroll-inner {
    display: block;
    width: 100%;
    max-width: none;

    min-height: 0;

    padding: 0;
    margin: 0;
  }

  .info-scroll-column--about {
    margin-bottom: var(--mobile-row-gap);
    padding-bottom: var(--mobile-row-gap);
  }

  .info-scroll-column--vita {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .info-scroll-column--vita::before {
    content: "Vita";
    display: block;
    width: 100%;

    font-family: var(--font-heading);
    font-weight: 900;
    font-style: normal;
    font-size: var(--headline-size);
    line-height: var(--headline-line-height);

    color: currentColor;

    margin: 0 0 0.25rem 0;
    padding: 0 0 0.2rem 0;

    border-bottom: var(--border-width) solid currentColor;
  }

  .info-text {
    display: block;
    width: 100%;
    max-width: none;

    font-size: var(--text-size);
    line-height: var(--text-line-height);
  }

  .info-text p {
    width: 100%;
    max-width: none;
    margin-bottom: 0.8rem;
  }

  .info-text p:last-child {
    margin-bottom: 0;
  }

  .info-image {
    width: 100%;
    max-width: none;

    margin: 0.75rem 0;
  }

  .info-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .info-contact {
    width: 100%;
    margin-top: 0.75rem;
  }

  .info-subheading {
    width: 100%;

    margin: 0 0 0.25rem 0;
    padding: 0 0 0.2rem 0;

    border-bottom: var(--border-width) solid currentColor;
  }

  /* =========================
     CALENDAR + MEDIA MOBILE
  ========================= */

  .calendar-table,
  .media-table {
    width: 100%;
    height: auto;
    overflow: visible;

    padding: var(--mobile-page-padding);
    padding-bottom: var(--content-bottom-safe);
  }

  .calendar-header,
  .media-header {
    position: static;
    display: none;
  }

  .calendar-list,
  .media-list {
    width: 100%;

    padding-top: 0;
    padding-bottom: 0;
  }

  .calendar-row,
  .media-row {
    display: block;
    width: 100%;

    padding: 0 0 var(--mobile-row-gap) 0;
    margin-bottom: var(--mobile-row-gap);

    border-bottom: var(--border-width) solid currentColor;
  }

  .calendar-row:last-child,
  .media-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .calendar-cell,
  .media-cell {
    display: block;
    width: 100%;

    margin-bottom: var(--mobile-cell-gap);

    color: currentColor;
    font-family: var(--font-cms);
    font-weight: 400;
    font-style: normal;
    font-size: var(--text-size);
    line-height: var(--text-line-height);
  }

  .calendar-cell:last-child,
  .media-cell:last-child {
    margin-bottom: 0;
  }

  .calendar-cell::before,
  .media-cell::before {
    display: block;
    width: 100%;

    font-family: var(--font-heading);
    font-weight: 900;
    font-style: normal;
    font-size: var(--headline-size);
    line-height: var(--headline-line-height);

    margin-bottom: 0.2rem;
    padding-bottom: 0;

    color: currentColor;
    border-bottom: none;
  }

  .calendar-cell--piece::before {
    content: "Stück";
  }

  .calendar-cell--date::before {
    content: "Datum & Uhrzeit";
  }

  .calendar-cell--location::before {
    content: "Ort";
  }

  .calendar-cell--ensemble::before {
    content: "Ensemble";
  }

  .media-cell--image::before {
    content: "";
  }

  .media-cell--piece::before {
    content: "Stück";
  }

  .media-cell--location::before {
    content: "Ort";
  }

  .media-cell--ensemble::before {
    content: "Ensemble";
  }

  .media-cell--year::before {
    content: "Jahr";
  }

  .calendar-piece,
  .calendar-subtitle {
    font-family: var(--font-cms);
    font-weight: 400;
  }

  .calendar-piece {
    font-size: var(--large-title-size);
    line-height: 0.85;
    margin: 0;
  }

  .calendar-subtitle {
    margin-top: 0.15rem;
    font-size: var(--text-size);
    line-height: var(--text-line-height);
  }

  .calendar-subtitle p,
  .calendar-cell p,
  .media-cell p {
    margin: 0;
  }

  .media-image {
    width: 100%;
    margin: 0;
  }

  .media-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .media-play {
    border-top-width: 1rem;
    border-bottom-width: 1rem;
    border-left-width: 1.55rem;
  }

  /* =========================
     MOBILE LIGHTBOX
  ========================= */

  .media-lightbox {
    padding: 1rem;
  }

  .media-lightbox__content {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 7rem);
  }

  .media-lightbox__content img,
  .media-lightbox__content video {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 7rem);
  }

  .media-lightbox__content iframe {
    width: calc(100vw - 2rem);
    height: calc((100vw - 2rem) * 0.5625);
    max-height: calc(100vh - 7rem);
  }
}


/* =========================
   LEGAL BUTTONS
========================= */

.legal-buttons {
  position: fixed;
  right: 1rem;
  top: 3rem;
  z-index: 100001;

  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;

  opacity: 0;
  transform: translateY(-0.25rem);
  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* sichtbar nur wenn Menü offen ist */

body.menu-open .legal-buttons {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.legal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-heading);
  font-weight: 900;
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1;

  padding: 0.15rem 0.55rem;

  border-radius: 999px;

  background: #000; 
  color: #fff;

  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.legal-button:hover {
  transform: scale(1.08);
}

.legal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-heading);
  font-weight: 900;
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1;

  padding: 0.15rem 0.55rem;

  border-radius: 999px;

  background: #b2b2b2;
  color: #fff;

  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Auf Legal-Seiten immer schwarz */

.page-impressum .legal-button,
.page-datenschutz .legal-button,
.page-cookie-richtlinie .legal-button {
  background: #000;
}

/* =========================
   MOBILE
========================= */
@media screen and (max-width: 768px) {
  .legal-buttons {
  position: fixed;
  top: 23.5rem; /* direkt unter den 3 Menüpunkten */
  left: 50%;
  right: auto;
  bottom: auto;

  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1rem;
}

  body.menu-open .legal-buttons {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }

  .legal-button {
    width: fit-content;
    font-size: 2rem;
    padding: 0.2rem 0.8rem;
  }
}


/* =========================
   LEGAL PAGES
   Impressum / Datenschutz / Cookie
========================= */

.legal-page {
  height: 100vh;
  overflow: hidden;

  padding-top: var(--page-top);

  background: var(--bg);
  color: #000;
}

/* Header / Überschrift */

.legal-header {
  position: fixed;
  top: var(--page-top);
  left: var(--page-padding);
  right: var(--page-padding);
  z-index: 100;

  background: var(--bg);
  color: #000;

  border-bottom: var(--border-width) solid currentColor;
}

.legal-heading {
  font-family: var(--font-heading);
  font-weight: 900;
  font-style: normal;
  font-size: var(--headline-size);
  line-height: var(--headline-line-height);

  margin: 0;
  padding: 0 0 0.35rem 0;

  color: currentColor;
}

/* Scrollbarer Inhalt */

.legal-content {
  height: calc(100vh - var(--page-top));

  overflow-y: auto;
  overscroll-behavior: contain;

  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  padding-top: 2rem;
  padding-bottom: var(--content-bottom-safe);

  background: var(--bg);
  color: #000;
}

/* CMS-Text */

.legal-text {
  width: 100%;
  max-width: none;

  font-family: var(--font-cms);
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-size);
  line-height: var(--text-line-height);

  color: currentColor;
}

.legal-text p {
  margin-bottom: 0.8rem;
}

.legal-text p:last-child {
  margin-bottom: 0;
}

.legal-text h2,
.legal-text h3,
.legal-text h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-style: normal;
  font-size: var(--headline-size);
  line-height: var(--headline-line-height);

  margin: 1rem 0 0.35rem 0;

  color: currentColor;
}

.legal-text h2:first-child,
.legal-text h3:first-child,
.legal-text h4:first-child {
  margin-top: 0;
}

.legal-text a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.08em;

  transition: opacity 0.2s ease;
}

.legal-text a:hover {
  opacity: 0.55;
}

/* Audio-Name auf Legal-Seiten schwarz */

.page-impressum #name,
.page-datenschutz #name,
.page-cookie-richtlinie #name {
  color: #000;
}

/* Menübutton auf Legal-Seiten schwarz */

.page-impressum .menu__toggle,
.page-datenschutz .menu__toggle,
.page-cookie-richtlinie .menu__toggle {
  background: #000;
}

/* Aktive Legal-Buttons hellgrau bleiben */

.page-impressum .legal-button,
.page-datenschutz .legal-button,
.page-cookie-richtlinie .legal-button {
  background: #d9d9d9;
  color: #fff;
}

/* =========================
   LEGAL MOBILE
========================= */

@media screen and (max-width: 768px) {
  .legal-page {
    height: auto;
    overflow: visible;

    padding-top: var(--mobile-page-top);

    background: var(--bg);
    color: #000;
  }

  .legal-header {
    position: static;

    padding: var(--mobile-page-padding);
    padding-bottom: 0;

    background: transparent;
    border-bottom: none;
  }

  .legal-heading {
    display: block;
    width: 100%;

    font-size: var(--headline-size);
    line-height: var(--headline-line-height);

    margin: 0 0 0.25rem 0;
    padding: 0 0 0.2rem 0;

    border-bottom: var(--border-width) solid currentColor;
  }

  .legal-content {
    height: auto;
    overflow: visible;

    padding: var(--mobile-page-padding);
    padding-top: 0;
    padding-bottom: var(--content-bottom-safe);
  }

  .legal-text {
    width: 100%;
    max-width: none;

    font-size: var(--text-size);
    line-height: var(--text-line-height);
  }

  .legal-text p {
    margin-bottom: 0.8rem;
  }

  .legal-text h2,
  .legal-text h3,
  .legal-text h4 {
    font-size: var(--headline-size);
    line-height: var(--headline-line-height);
    margin: 1rem 0 0.35rem 0;
  }
}

/* =========================
   HOME PAGE
========================= */

.home-page {
  position: relative;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  background: var(--bg);
}

.home-image {
  position: fixed;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 1;

  width: 30vw;
  max-width: 18rem;
  min-width: 10rem;

  margin: 0;
  pointer-events: none;
}

.home-image img {
  display: block;

  width: 100%;
  height: auto;
}

/* Startseite: Name schwarz lassen */

.page-home #name {
  color: #000;
}

.page-home .menu__toggle {
  background: #000;
}

/* =========================
   HOME MOBILE
========================= */

@media screen and (max-width: 768px) {
  .home-page {
    height: 100vh;
    overflow: hidden;
  }

  .home-image {
    width: 70vw;
    max-width: none;
    min-width: 0;
  }
}