/* webfonts */
/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/roboto-condensed-v31-latin-regular.woff2")
    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bebas kai - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bebas Kai";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/BebasKai.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Variablen */
:root {
  --text-font: "Roboto Condensed", sans-serif;
  --header-font: "Bebas Kai", sans-serif;

  --white: #fff;
  --black: #262626;
  --bg-color: #000000;

  --border-radius: 30px;
  --border: 1px solid rgba(255, 255, 255, 0.35);

  --btn-drop-shadow: drop-shadow(
      -11.15px -10.39px 48px -12px rgba(0, 0, 0, 0.15)
    ),
    drop-shadow(-1.86px -1.73px 12px -8px rgba(0, 0, 0, 0.15));

  --btn-inner-shadow: inset 2.15px 2px 9.24px rgba(255, 255, 255, 0.35),
    inset 1.22px 1.13px 4.62px rgba(255, 255, 255, 0.35);

  --btn-blur: blur(20px) saturate(180%);

  --btn-white: linear-gradient(
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.4)
  );
  --btn-black: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  --btn-hover: rgba(102, 102, 102, 0.3);
}

/* Basis Klassen*/

/*Button*/
.btn-glass {
  background: var(--btn-white), var(--dynamic-btn-color);
  background-blend-mode: overlay;
  border-radius: var(--border-radius);
  border: var(--border);
  filter: var(--btn-drop-shadow);
  box-shadow: var(--btn-inner-shadow);
  backdrop-filter: var(--btn-blur);
  -webkit-backdrop-filter: var(--btn-blur);
  padding: 14px;
  transition: all 0.3s ease-in-out;

  &.no-dynamic-color {
    --dynamic-btn-color: rgba(255, 255, 255, 0.2) !important;
  }

  &.share {
    height: 50px;
    padding: 11px 15px 10px 15px;

    svg {
      width: 20px;
    }
  }

  &.home,
  &.text,
  &.video,
  &.audio,
  &.backwards,
  &.forwards {
    height: 50px;
    width: 50px;

    &.is-active:before,
    &.is-inactive:before {
      content: "";
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
      vertical-align: middle;
    }
  }

  &.home {
    svg {
      width: 29px;
      height: 25px;
      margin-left: -5px;
      margin-top: -3px;
    }
  }

  &.text {
    &.is-active:before {
      width: 25px;
      height: 21px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='21' fill='none' viewBox='0 0 25 21'%3E%3Cpath fill='%23262626' stroke='%23262626' stroke-width='.2' d='M13.618 18.51a.99.99 0 0 1 .99.99.98.98 0 0 1-.99.98H1.078A.97.97 0 0 1 .1 19.5c0-.545.43-.99.979-.99h12.539Zm9.293-6.128a.99.99 0 0 1 1.002.978 1 1 0 0 1-1.002.99H1.079a.98.98 0 0 1-.979-.99.97.97 0 0 1 .979-.978H22.91Zm0-6.141a.99.99 0 0 1 1.002.978c0 .562-.457.99-1.002.99H1.079A.972.972 0 0 1 .1 7.22a.97.97 0 0 1 .979-.978H22.91Zm0-6.14a.99.99 0 0 1 1.002.978c0 .562-.457.99-1.002.99H1.079A.972.972 0 0 1 .1 1.08.97.97 0 0 1 1.08.1h21.83Z'/%3E%3C/svg%3E%0A");
      margin-top: 1px;
      margin-left: -2px;
    }

    &.is-inactive:before {
      width: 25px;
      height: 25px;
      background-image: url("data:image/svg+xml,%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.95 24.94'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath d='M13.9,21.48H1.36c-.55,0-.98.45-.98.99,0,0,0,.01,0,.02,0,.54.44.97.98.96h12.54s0,0,.01,0c.54,0,.98-.44.98-.98s-.44-.99-.99-.99Z'/%3E%3Cpath d='M23.2,11.18c.54,0,1-.43,1-.99h0c0-.55-.46-.98-1-.98h0s-10.43,0-10.43,0l1.97,1.97h8.47Z'/%3E%3Cpath d='M23.2,17.32c.55,0,1-.44,1-.99h0c0-.55-.46-.98-1-.98h-4.29l1.97,1.97h2.32Z'/%3E%3Cpath d='M1.36,15.35s-.01,0-.02,0c-.54,0-.97.44-.96.98,0,0,0,0,0,0,0,.54.44.98.98.98h12.43c-.92-.91-.99-.99-1.97-1.97H1.36Z'/%3E%3Cpath d='M23.2,5.04c.54,0,1-.43,1-.99h0c0-.55-.46-.98-1-.98h0s-16.58,0-16.58,0l1.97,1.97h14.61Z'/%3E%3Cpath d='M1.36,9.21s-.01,0-.02,0c-.54,0-.97.44-.96.98,0,0,0,.02,0,.02,0,.54.44.97.98.96h6.28c-.92-.91-1.17-1.17-1.97-1.97H1.36Z'/%3E%3Cpath d='M.38,4.05s0,.02,0,.02c0,.54.44.97.98.96h.13c-.2-.2-.98-.98-1.09-1.09,0,.04-.02.07-.02.1Z'/%3E%3Cpath d='M1.54.26C1.19-.09.61-.09.25.26-.08.62-.08,1.18.25,1.54l23.16,23.13h0c.35.35.92.35,1.28,0,.35-.35.35-.92,0-1.28L1.54.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      margin-top: -2px;
      margin-left: -2px;
    }
  }

  &.video {
    &.is-active:before {
      width: 29px;
      height: 19px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='20' fill='none' viewBox='0 0 29 20'%3E%3Cpath fill='%23262626' d='M3.762 19.031h12.586c2.355 0 3.761-1.36 3.761-3.715V3.703C20.11 1.36 18.82 0 16.465 0H3.762C1.512 0 0 1.36 0 3.703v11.613c0 2.356 1.406 3.715 3.762 3.715Zm17.941-6.058 4.266 3.691c.398.352.867.574 1.289.574.914 0 1.512-.668 1.512-1.629V3.422c0-.961-.598-1.629-1.512-1.629-.422 0-.89.223-1.29.574l-4.265 3.68v6.926Z'/%3E%3C/svg%3E%0A");
      margin-top: 0px;
      margin-left: -2px;
    }

    &.is-inactive:before {
      width: 31px;
      height: 25px;
      background-image: url("data:image/svg+xml,%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.19 24.94'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath d='M2.42,6.65v11.61c0,2.36,1.41,3.72,3.76,3.72h0s12.27,0,12.27,0C14.03,17.57,6.42,9.96,2.48,6.02c-.03.2-.05.41-.05.63Z'/%3E%3Cpath d='M29.68,4.74c-.42,0-.89.22-1.29.57l-4.27,3.68v6.92l4.27,3.69c.4.35.87.57,1.29.57.91,0,1.51-.67,1.51-1.63V6.37c0-.96-.6-1.63-1.51-1.63Z'/%3E%3Cpath d='M22.53,18.26V6.65c0-2.34-1.29-3.7-3.65-3.7H6.49l15.99,15.98c.03-.21.05-.43.05-.67Z'/%3E%3Cpath d='M1.54.26C1.19-.09.61-.09.25.26-.08.62-.08,1.18.25,1.54l23.16,23.13h0c.35.35.92.35,1.28,0,.35-.35.35-.92,0-1.28L1.54.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
      margin-top: -2px;
      margin-left: -5px;
    }
  }

  &.audio {
    &.is-active:before {
      width: 26px;
      height: 21px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='21' fill='none' viewBox='0 0 27 21'%3E%3Cpath fill='%23262626' d='M22.488 18.387c.434.293.973.187 1.29-.258 1.5-2.063 2.378-4.899 2.378-7.793 0-2.895-.867-5.754-2.379-7.793-.316-.445-.855-.55-1.289-.258-.433.293-.504.844-.164 1.324 1.278 1.805 2.016 4.23 2.016 6.727 0 2.496-.762 4.898-2.016 6.726-.328.481-.27 1.032.164 1.325Zm-4.336-3.059c.387.27.938.188 1.254-.27.903-1.183 1.442-2.93 1.442-4.722 0-1.793-.54-3.527-1.442-4.723-.316-.457-.867-.55-1.254-.27-.48.329-.55.915-.187 1.395.68.938 1.066 2.239 1.066 3.598 0 1.36-.398 2.648-1.066 3.598-.352.492-.293 1.054.187 1.394Zm-5.519 5.356c.773 0 1.324-.551 1.324-1.313V1.395c0-.762-.55-1.383-1.348-1.383-.55 0-.914.246-1.511.808L6.094 5.508a.408.408 0 0 1-.293.105H2.449C.855 5.613 0 6.493 0 8.18v4.36c0 1.698.855 2.566 2.45 2.566H5.8c.118 0 .223.035.294.105l5.004 4.734c.527.516.984.739 1.535.739Z'/%3E%3C/svg%3E%0A");
      margin-top: 1px;
      margin-left: -2px;
    }

    &.is-inactive:before {
      width: 26px;
      height: 21px;
      background-image: url("data:image/svg+xml,%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.88 22.17'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath d='M16.3,1.39C16.3.62,15.75,0,14.95,0c-1.21-.15-5.53,4.86-6.5,5.5,0,0-.01,0-.02.01,2.48,2.48,5.36,5.35,7.87,7.87V1.39Z'/%3E%3Cpath d='M2.34,12.53c-.24,3.36,3.74,2.46,5.81,2.57,1.66.43,6.6,8.29,8.03,4.59L2.88,6.41c-1,1.48-.38,4.62-.54,6.12Z'/%3E%3Cpath d='M1.54.57C1.19.22.61.22.25.57-.08.93-.08,1.49.25,1.84l20.09,20.06c.35.35.92.35,1.28,0,.34-.36.35-.93,0-1.28L1.54.57Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      margin-top: 1px;
      margin-left: -2px;
    }
  }

  &.video {
    &.is-active:before {
      width: 29px;
      height: 19px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='20' fill='none' viewBox='0 0 29 20'%3E%3Cpath fill='%23262626' d='M3.762 19.031h12.586c2.355 0 3.761-1.36 3.761-3.715V3.703C20.11 1.36 18.82 0 16.465 0H3.762C1.512 0 0 1.36 0 3.703v11.613c0 2.356 1.406 3.715 3.762 3.715Zm17.941-6.058 4.266 3.691c.398.352.867.574 1.289.574.914 0 1.512-.668 1.512-1.629V3.422c0-.961-.598-1.629-1.512-1.629-.422 0-.89.223-1.29.574l-4.265 3.68v6.926Z'/%3E%3C/svg%3E%0A");
      margin-top: 0;
      margin-left: -2px;
    }

    &.is-inactive:before {
      width: 31px;
      height: 25px;
      background-image: url("data:image/svg+xml,%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.19 24.94'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath d='M2.42,6.65v11.61c0,2.36,1.41,3.72,3.76,3.72h0s12.27,0,12.27,0C14.03,17.57,6.42,9.96,2.48,6.02c-.03.2-.05.41-.05.63Z'/%3E%3Cpath d='M29.68,4.74c-.42,0-.89.22-1.29.57l-4.27,3.68v6.92l4.27,3.69c.4.35.87.57,1.29.57.91,0,1.51-.67,1.51-1.63V6.37c0-.96-.6-1.63-1.51-1.63Z'/%3E%3Cpath d='M22.53,18.26V6.65c0-2.34-1.29-3.7-3.65-3.7H6.49l15.99,15.98c.03-.21.05-.43.05-.67Z'/%3E%3Cpath d='M1.54.26C1.19-.09.61-.09.25.26-.08.62-.08,1.18.25,1.54l23.16,23.13h0c.35.35.92.35,1.28,0,.35-.35.35-.92,0-1.28L1.54.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
      margin-top: -2px;
      margin-left: -5px;
    }
  }

  &.backwards {
    svg {
      width: 29px;
      height: 25px;
      margin-left: -5px;
      margin-top: -2px;
    }
  }
  &.forwards {
    svg {
      width: 29px;
      height: 25px;
      margin-left: -3px;
      margin-top: -2px;
    }
  }

  /*Hover Effekte*/
  &:hover {
    background-color: var(--btn-hover);
  }

  &.btn-text:hover {
    color: var(--white);
  }

  &.text:hover {
    &.is-active:before {
      background-image: url("data:image/svg+xml,%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.95 24.94'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath fill='%23ffffff' d='M13.9,21.48H1.36c-.55,0-.98.45-.98.99,0,0,0,.01,0,.02,0,.54.44.97.98.96h12.54s0,0,.01,0c.54,0,.98-.44.98-.98s-.44-.99-.99-.99Z'/%3E%3Cpath fill='%23ffffff' d='M23.2,11.18c.54,0,1-.43,1-.99h0c0-.55-.46-.98-1-.98h0s-10.43,0-10.43,0l1.97,1.97h8.47Z'/%3E%3Cpath fill='%23ffffff' d='M23.2,17.32c.55,0,1-.44,1-.99h0c0-.55-.46-.98-1-.98h-4.29l1.97,1.97h2.32Z'/%3E%3Cpath fill='%23ffffff' d='M1.36,15.35s-.01,0-.02,0c-.54,0-.97.44-.96.98,0,0,0,0,0,0,0,.54.44.98.98.98h12.43c-.92-.91-.99-.99-1.97-1.97H1.36Z'/%3E%3Cpath fill='%23ffffff' d='M23.2,5.04c.54,0,1-.43,1-.99h0c0-.55-.46-.98-1-.98h0s-16.58,0-16.58,0l1.97,1.97h14.61Z'/%3E%3Cpath fill='%23ffffff' d='M1.36,9.21s-.01,0-.02,0c-.54,0-.97.44-.96.98,0,0,0,.02,0,.02,0,.54.44.97.98.96h6.28c-.92-.91-1.17-1.17-1.97-1.97H1.36Z'/%3E%3Cpath fill='%23ffffff' d='M.38,4.05s0,.02,0,.02c0,.54.44.97.98.96h.13c-.2-.2-.98-.98-1.09-1.09,0,.04-.02.07-.02.1Z'/%3E%3Cpath fill='%23ffffff' d='M1.54.26C1.19-.09.61-.09.25.26-.08.62-.08,1.18.25,1.54l23.16,23.13h0c.35.35.92.35,1.28,0,.35-.35.35-.92,0-1.28L1.54.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      margin-top: -2px;
      margin-left: -2px;
      width: 25px;
      height: 25px;
    }

    &.is-inactive:before {
      width: 25px;
      height: 21px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='21' fill='none' viewBox='0 0 25 21'%3E%3Cpath fill='%23ffffff' stroke='%23ffffff' stroke-width='.2' d='M13.618 18.51a.99.99 0 0 1 .99.99.98.98 0 0 1-.99.98H1.078A.97.97 0 0 1 .1 19.5c0-.545.43-.99.979-.99h12.539Zm9.293-6.128a.99.99 0 0 1 1.002.978 1 1 0 0 1-1.002.99H1.079a.98.98 0 0 1-.979-.99.97.97 0 0 1 .979-.978H22.91Zm0-6.141a.99.99 0 0 1 1.002.978c0 .562-.457.99-1.002.99H1.079A.972.972 0 0 1 .1 7.22a.97.97 0 0 1 .979-.978H22.91Zm0-6.14a.99.99 0 0 1 1.002.978c0 .562-.457.99-1.002.99H1.079A.972.972 0 0 1 .1 1.08.97.97 0 0 1 1.08.1h21.83Z'/%3E%3C/svg%3E%0A");
      margin-top: 1px;
      margin-left: -2px;
    }
  }

  &.video:hover {
    &.is-active:before {
      background-image: url("data:image/svg+xml,%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.19 24.94'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath fill='%23ffffff' d='M2.42,6.65v11.61c0,2.36,1.41,3.72,3.76,3.72h0s12.27,0,12.27,0C14.03,17.57,6.42,9.96,2.48,6.02c-.03.2-.05.41-.05.63Z'/%3E%3Cpath fill='%23ffffff' d='M29.68,4.74c-.42,0-.89.22-1.29.57l-4.27,3.68v6.92l4.27,3.69c.4.35.87.57,1.29.57.91,0,1.51-.67,1.51-1.63V6.37c0-.96-.6-1.63-1.51-1.63Z'/%3E%3Cpath fill='%23ffffff' d='M22.53,18.26V6.65c0-2.34-1.29-3.7-3.65-3.7H6.49l15.99,15.98c.03-.21.05-.43.05-.67Z'/%3E%3Cpath fill='%23ffffff' d='M1.54.26C1.19-.09.61-.09.25.26-.08.62-.08,1.18.25,1.54l23.16,23.13h0c.35.35.92.35,1.28,0,.35-.35.35-.92,0-1.28L1.54.26Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
      margin-top: -2px;
      margin-left: -5px;
      width: 31px;
      height: 25px;
    }

    &.is-inactive:before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='20' fill='none' viewBox='0 0 29 20'%3E%3Cpath fill='%23ffffff' d='M3.762 19.031h12.586c2.355 0 3.761-1.36 3.761-3.715V3.703C20.11 1.36 18.82 0 16.465 0H3.762C1.512 0 0 1.36 0 3.703v11.613c0 2.356 1.406 3.715 3.762 3.715Zm17.941-6.058 4.266 3.691c.398.352.867.574 1.289.574.914 0 1.512-.668 1.512-1.629V3.422c0-.961-.598-1.629-1.512-1.629-.422 0-.89.223-1.29.574l-4.265 3.68v6.926Z'/%3E%3C/svg%3E%0A");
      margin-top: 0px;
      margin-left: -2px;
      width: 29px;
      height: 19px;
    }
  }

  &.audio:hover {
    &.is-active:before {
      background-image: url("data:image/svg+xml,%3Csvg id='Ebene_2' data-name='Ebene 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.88 22.17'%3E%3Cg id='Ebene_1-2' data-name='Ebene 1'%3E%3Cg%3E%3Cpath fill='%23ffffff' d='M16.3,1.39C16.3.62,15.75,0,14.95,0c-1.21-.15-5.53,4.86-6.5,5.5,0,0-.01,0-.02.01,2.48,2.48,5.36,5.35,7.87,7.87V1.39Z'/%3E%3Cpath fill='%23ffffff' d='M2.34,12.53c-.24,3.36,3.74,2.46,5.81,2.57,1.66.43,6.6,8.29,8.03,4.59L2.88,6.41c-1,1.48-.38,4.62-.54,6.12Z'/%3E%3Cpath fill='%23ffffff' d='M1.54.57C1.19.22.61.22.25.57-.08.93-.08,1.49.25,1.84l20.09,20.06c.35.35.92.35,1.28,0,.34-.36.35-.93,0-1.28L1.54.57Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    &.is-inactive:before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='21' fill='none' viewBox='0 0 27 21'%3E%3Cpath fill='%23ffffff' d='M22.488 18.387c.434.293.973.187 1.29-.258 1.5-2.063 2.378-4.899 2.378-7.793 0-2.895-.867-5.754-2.379-7.793-.316-.445-.855-.55-1.289-.258-.433.293-.504.844-.164 1.324 1.278 1.805 2.016 4.23 2.016 6.727 0 2.496-.762 4.898-2.016 6.726-.328.481-.27 1.032.164 1.325Zm-4.336-3.059c.387.27.938.188 1.254-.27.903-1.183 1.442-2.93 1.442-4.722 0-1.793-.54-3.527-1.442-4.723-.316-.457-.867-.55-1.254-.27-.48.329-.55.915-.187 1.395.68.938 1.066 2.239 1.066 3.598 0 1.36-.398 2.648-1.066 3.598-.352.492-.293 1.054.187 1.394Zm-5.519 5.356c.773 0 1.324-.551 1.324-1.313V1.395c0-.762-.55-1.383-1.348-1.383-.55 0-.914.246-1.511.808L6.094 5.508a.408.408 0 0 1-.293.105H2.449C.855 5.613 0 6.493 0 8.18v4.36c0 1.698.855 2.566 2.45 2.566H5.8c.118 0 .223.035.294.105l5.004 4.734c.527.516.984.739 1.535.739Z'/%3E%3C/svg%3E%0A");
    }
  }

  &.backwards:hover svg path,
  &.forwards:hover svg path,
  &.home:hover svg path,
  &.share:hover svg path {
    fill: var(--white);
  }
}

.btn-text {
  font-family: var(--header-font);
  font-weight: 100;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  padding-top: 12.5px;
  height: 50px;
}

h1 {
  font-family: var(--header-font);
  font-size: 64px;
  font-weight: 100;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);

  &.btn-glass {
    background: var(--btn-black);
    padding: 10px 30px;

    &:hover {
      background: var(--btn-black);
    }
  }
}

h2 {
  font-family: var(--header-font);
  font-size: 24px;
  line-height: 26px;
  margin: 10px 0;
}

p {
  font-size: 20px;
  line-height: 26px;
  color: var(--black);
}

* {
  box-sizing: border-box;
}

/* Content Styles 
Main */
body {
  font-family: var(--text-font);
  background-color: var(--bg-color);
  overflow: hidden;
  -webkit-touch-callout: none; /* iOS Safari Kontextmenü */
  -webkit-user-select: none; /* Safari */
  user-select: none; /* Standard */

  .media-container {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;

    .error-msg {
      color: var(--white);
      font-size: 50px;
      text-align: center;
    }

    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  header,
  main,
  footer {
    position: relative;
    z-index: 2;
  }

  header.settings-area {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 40px 40px auto 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    transform: translateY(-150%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;

    &.cover {
      position: relative;
      transform: none;
      opacity: 1;
    }

    .btn-home {
      display: flex;
    }

    .settings {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .settings.btn {
      transition: opacity 0.4s ease;

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

      .is-inactive {
        opacity: 0;
        pointer-events: none;
      }
    }
  }

  main.title-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 200px);

    .cover-controls {
      display: flex;
      gap: 20px;
    }
  }

  main.page-grid {
    margin-left: 40px;
    margin-top: 100px;

    section.text-content {
      position: fixed;
      top: 50px;
      left: 0;
      margin: 0;
      z-index: 999;
      max-width: 420px;
      max-height: 185px;
      overflow: hidden;
      display: flex;
      touch-action: none;
      flex-direction: column;
      padding: 0 20px;
      will-change: transform;
      transform: translateZ(0);
      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s ease-out;

      &.is-dragging {
        transition: none;
      }

      &.expanded {
        max-height: 550px;
        min-width: 220px;
        overflow: none;

        .story-text {
          overflow: auto;
          margin-right: -18px;
          padding-right: 18px;
          user-select: text;
          -webkit-user-select: text;

          /*Anpassung Scrollbar*/
          &::-webkit-scrollbar {
            width: 11px;
            height: 10px;
          }

          &::-webkit-scrollbar-track {
            background: transparent !important;
          }

          &::-webkit-scrollbar-thumb {
            background-color: rgba(120, 120, 120, 0.5);
            border-radius: 20px;
            border: 3px solid transparent;
            background-clip: content-box;
          }

          .text-container::-webkit-scrollbar-thumb:hover {
            background-color: rgba(100, 100, 100, 0.8);
          }
        }
      }

      &:hover {
        background: var(--btn-white), var(--dynamic-btn-color);
      }

      .text-content-header {
        margin: 0 auto;
        cursor: move;
      }

      .text-content-titelzeile {
        display: flex;
        justify-content: space-between;
        align-items: center;

        a.icon-close-text {
          font-family: var(--header-font);
          font-size: 30px;
          text-decoration: none;
          color: var(--black);
          margin-top: -30px;

          &:hover svg path {
            fill: var(--white);
          }
        }
      }

      p.story-text {
        margin-top: 0;
      }
    }
  }

  nav.main-nav {
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 20px;
    position: fixed;
    bottom: 40px;
    left: 50%;
    z-index: 2000;

    /* Startzustand: Versteckt */
    transform: translateX(-50%) translateY(200px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;

    .page-status {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 50px;

      &:hover {
        background: var(--btn-white), var(--dynamic-btn-color);
      }

      p {
        margin: 0;
        font-family: var(--header-font);
      }
    }
  }

  /*
  * Einblendung Bedienelemente
  */
  &.controls-visible header.settings-area,
  &.controls-visible nav.main-nav {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  &.controls-visible header.settings-area {
    transform: translateY(0);
    opacity: 1;
  }

  .media-container {
    touch-action: none;
    cursor: auto;
    pointer-events: all;

    & img,
    & video {
      pointer-events: none;
      -webkit-touch-callout: none;
    }
  }

  /* Cursor verstecken, wenn UI weg ist */
  &:not(.controls-visible) {
    cursor: none;
  }

  /* Aber Cursor auf Bedienelementen, Text und Cover-Seite immer zeigen */
  &:not(.controls-visible) .text-content,
  &:not(.controls-visible) .btn-glass,
  &:not(.controls-visible) main.title-area {
    cursor: auto;
  }

  a.btn-glass {
    cursor: pointer !important;
  }
}