/*Variablen*/
/***************** Privat ******************/
/***************** Heart ******************/
/***************** Ritual ******************/
/***************** Forget ******************/
/***************** Numb ******************/
/***************** Gone ******************/
* {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body,
html {
  font-family: "montserratregular", sans-serif;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

::before,
::after {
  font-family: "cairobold", "sans-serif";
}

h1,
h2,
h3 {
  font-family: "cairobold", "sans-serif";
}

h1 {
  font-size: 5rem;
  color: transparent;
  line-height: 1;
  /*   @include tablet-portrait-l {
    font-size: fontSize(xl);
  }
  @include tablet-landscape {
    font-size: fontSize(xl);
  }
  @include desktop {
    font-size: fontSize(xl);
  } */
  /*  @include desktop-xl {
    font-size: fontSize(3xl);
  } */
}

@media (min-width: 414px) {
  h1 {
    font-size: 8rem;
  }
}

@media (min-width: 650px) {
  h1 {
    font-size: 9rem;
  }
}

@media (min-width: 1400px) {
  h1 {
    font-size: 12rem;
  }
}

h2 {
  font-size: 3.5rem;
  color: #fff;
  /* 
  @include desktop {
    font-size: fontSize(xl);
  }

  @include desktop-xl {
    font-size: fontSize(l2);
  }
 */
}

@media (min-width: 650px) {
  h2 {
    font-size: 5rem;
  }
}

@media (min-width: 1023px) {
  h2 {
    font-size: 8rem;
  }
}

@media (min-width: 2000px) {
  h2 {
    font-size: 5rem;
  }
}

h3 {
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 800px) {
  h3 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  h3 {
    font-size: 3.5rem;
  }
}

h4 {
  font-family: "cairobold", "sans-serif";
  font-size: 1.3rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  font-size: 1.3rem;
  color: #141414;
}

a {
  font-size: 1.3rem;
  color: #141414;
  text-decoration: none;
}

@font-face {
  font-family: 'cairobold';
  src: url("/fonts/cairo-bold-webfont.eot");
  src: url("/fonts/cairo-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/cairo-bold-webfont.woff2") format("woff2"), url("/fonts/cairo-bold-webfont.woff") format("woff"), url("/fonts/cairo-bold-webfont.ttf") format("truetype"), url("/fonts/cairo-bold-webfont.svg#cairobold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'montserratregular';
  src: url("/fonts/montserrat-regular-webfont.eot");
  src: url("/fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/montserrat-regular-webfont.woff2") format("woff2"), url("/fonts/montserrat-regular-webfont.woff") format("woff"), url("/fonts/montserrat-regular-webfont.ttf") format("truetype"), url("/fonts/montserrat-regular-webfont.svg#montserratregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

.fade-in {
  opacity: 0;
  -webkit-transition: 150ms opacity ease-out;
  transition: 150ms opacity ease-out;
}

.fade-in--active {
  opacity: 1;
}

.section {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}

.section__inner {
  background-color: #141414;
  height: auto;
  /*display: grid;
     grid-template-columns: 5vw 1fr 5vw;
    grid-auto-rows: 5vw auto 1fr 5vw;
    grid-template-areas:
      ". . ."
      ". sectionTitle ."
      ". section ."
      ". . ."; */
  /*  @include tablet-portrait {
      grid-template-columns: 10vw 1fr 10vw;
      grid-auto-rows: 0vw auto 1fr 5vw;
    } */
  /*  @include desktop {
      height: 100vh;
    } */
}

.section__heading {
  overflow: hidden;
}

@media (min-width: 650px) {
  .section__heading {
    color: #fff;
    line-height: 1.2em;
  }
  @supports (-webkit-text-stroke: 2px #fff) {
    .section__heading {
      -webkit-text-stroke: 2px #fff;
      color: rgba(0, 0, 0, 0);
    }
  }
}

.section__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.section__hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-height: 1280px;
}

@media (min-width: 650px) {
  .section__hero {
    height: 70vh;
  }
}

@media (min-width: 1200px) {
  .section__hero {
    height: 100vh;
  }
}

.section__hero .hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
}

@media (min-width: 650px) {
  .section__hero .hero {
    width: 80vw;
    height: 60vh;
  }
}

@media (min-width: 1200px) {
  .section__hero .hero {
    width: 100%;
    height: 100%;
  }
}

.section__hero .hero-img-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
}

@media (min-width: 650px) {
  .section__hero .hero-img-wrapper {
    width: 80%;
  }
}

@media (min-width: 1200px) {
  .section__hero .hero-img-wrapper {
    position: relative;
    width: 50%;
    /* height: 80%; */
    left: unset;
  }
}

.section__hero .hero-img-wrapper::before {
  content: "";
  z-index: 10;
  position: absolute;
  background-color: #fff;
  width: 101%;
  height: 101%;
  top: 0;
  right: 0;
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
  transition: transform 500ms ease-out, -webkit-transform 500ms ease-out;
  -webkit-animation: reveal-hero-img 500ms ease-out 0ms 1 normal forwards running;
          animation: reveal-hero-img 500ms ease-out 0ms 1 normal forwards running;
}

.section__hero .hero-img-wrapper .hero__img {
  position: absolute;
  width: 1920px;
  height: 1280px;
  left: 5%;
  top: -35%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media (min-width: 321px) {
  .section__hero .hero-img-wrapper .hero__img {
    top: -20%;
  }
}

@media (min-width: 1200px) {
  .section__hero .hero-img-wrapper .hero__img {
    left: 25%;
    top: 0;
  }
}

@media (min-width: 2500px) {
  .section__hero .hero-img-wrapper .hero__img {
    left: 50%;
  }
}

@media (min-width: 3841px) {
  .section__hero .hero-img-wrapper .hero__img {
    left: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.section__hero .hero-headline-wrapper {
  text-align: right;
  padding: 1rem;
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
  margin-bottom: 20vh;
}

@media (min-width: 650px) {
  .section__hero .hero-headline-wrapper {
    margin-bottom: 5rem;
  }
}

@media (min-width: 1200px) {
  .section__hero .hero-headline-wrapper {
    padding: unset;
    margin-bottom: unset;
    -ms-flex-item-align: unset;
        align-self: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
    height: 100%;
  }
}

.section__hero .hero__headline {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin-right: 1rem;
  height: auto;
}

.section__hero .hero__headline--firstLine {
  /* -webkit-text-stroke: 2px color(weiss); */
  color: #fff;
  transition: -webkit-text-stroke 250ms ease-in-out;
  margin-bottom: 1rem;
}

@supports (-webkit-text-stroke: 2px #fff) {
  .section__hero .hero__headline--firstLine {
    -webkit-text-stroke: 2px #fff;
    color: rgba(0, 0, 0, 0);
  }
}

.section__hero .hero__headline--secondLine {
  font-size: 2.5rem;
  color: #fff;
  -webkit-transition: color 250ms ease-in-out;
  transition: color 250ms ease-in-out;
}

@media (min-width: 414px) {
  .section__hero .hero__headline--secondLine {
    font-size: 3.5rem;
  }
}

@media (min-width: 470px) {
  .section__hero .hero__headline--secondLine {
    font-size: 4rem;
  }
}

@media (min-width: 800px) {
  .section__hero .hero__headline--secondLine {
    font-size: 5rem;
  }
}

@media (min-width: 1400px) {
  .section__hero .hero__headline--secondLine {
    font-size: 8rem;
  }
}

.section__hero .hero__headline--secondLine.headline--postAppear {
  color: #fff;
}

.section__hero .hero__headline--secondLine.headline--appear::before {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.section__hero .hero__headline span {
  z-index: 1;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 2rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.section__hero .hero__headline span::before {
  content: "";
  z-index: -1;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transition: -webkit-transform 500ms ease-out;
  transition: -webkit-transform 500ms ease-out;
  transition: transform 500ms ease-out;
  transition: transform 500ms ease-out, -webkit-transform 500ms ease-out;
  -webkit-transform: translate(100%, 0%);
  transform: translateX(100%, 0%);
  -webkit-animation: reveal-hero-headline 500ms ease-out 200ms 1 normal forwards
 running;
          animation: reveal-hero-headline 500ms ease-out 200ms 1 normal forwards
 running;
}

.section__hero .hero__subHeadline {
  margin-right: 1rem;
  position: relative;
  z-index: 1;
  padding: 0 2rem;
  color: rgba(0, 0, 0, 0);
  -webkit-transition: color 250ms ease-in-out;
  transition: color 250ms ease-in-out;
}

@media (min-width: 650px) {
  .section__hero .hero__subHeadline {
    padding-right: 2rem;
  }
}

@media (min-width: 1900px) {
  .section__hero .hero__subHeadline {
    padding-right: 5rem;
    -webkit-transition: unset;
    transition: unset;
  }
}

.section__hero .hero__subHeadline::before {
  content: "";
  z-index: -1;
  position: absolute;
  width: 72rem;
  height: 100%;
  background-color: #fff;
  right: 0;
  margin-right: -1rem;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  transition: -webkit-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
}

@media (min-width: 1200px) {
  .section__hero .hero__subHeadline::before {
    background-color: #191919;
  }
}

.section__hero .hero__subHeadline.subHeadline--preAppear::before {
  -webkit-transform: translate3d(45%, 0, 0);
          transform: translate3d(45%, 0, 0);
}

@media (min-width: 800px) {
  .section__hero .hero__subHeadline.subHeadline--preAppear::before {
    -webkit-transform: translate3d(33%, 0, 0);
            transform: translate3d(33%, 0, 0);
  }
}

@media (min-width: 1200px) {
  .section__hero .hero__subHeadline.subHeadline--preAppear::before {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.section__hero .hero__subHeadline.subHeadline--appear {
  color: #fff;
}

@media (min-width: 650px) {
  .section__hero .hero__subHeadline.subHeadline--appear {
    color: #191919;
  }
}

/* @keyframes imageAppear {
  0% {

  }
  100% {
  }
} */
/*test for dormilo crawl position*/
.dormilo-positioner {
  z-index: 10;
  position: absolute;
  width: 1920px;
  height: 1280px;
  left: 5%;
  top: -35%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@supports (mix-blend-mode: luminosity) {
  .dormilo-positioner {
    background-color: rgba(255, 255, 255, 0);
    mix-blend-mode: luminosity;
  }
}

@media (min-width: 321px) {
  .dormilo-positioner {
    top: -20%;
  }
}

@media (min-width: 1200px) {
  .dormilo-positioner {
    left: 25%;
    top: 0;
  }
}

@media (min-width: 2500px) {
  .dormilo-positioner {
    left: 50%;
  }
}

@media (min-width: 3841px) {
  .dormilo-positioner {
    left: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.dormilo-positioner .bar {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  width: 15rem;
  top: 26%;
  left: 55%;
  padding: 0.2rem 2rem;
  -webkit-transform: scaleX(0%);
          transform: scaleX(0%);
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-animation: dormilo-bar-appear 250ms ease-out 250ms 1 normal forwards running;
          animation: dormilo-bar-appear 250ms ease-out 250ms 1 normal forwards running;
}

.dormilo-positioner .bar-wrapper {
  height: 2.5rem;
  text-align: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  left: -2rem;
  position: relative;
  /*  opacity: 0;
      animation: dormilo-bar-preCrawl 150ms linear 0ms 1 normal forwards
        running; */
}

.dormilo-positioner .bar__dormilo {
  -webkit-animation: dormilo-bar-crawl 8000ms linear 0ms infinite normal backwards
 running;
          animation: dormilo-bar-crawl 8000ms linear 0ms infinite normal backwards
 running;
}

@-webkit-keyframes reveal-hero-img {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
  }
}

@keyframes reveal-hero-img {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(101%);
            transform: translateY(101%);
  }
}

@-webkit-keyframes reveal-hero-headline {
  0% {
    -webkit-transform: translateX(101%);
            transform: translateX(101%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes reveal-hero-headline {
  0% {
    -webkit-transform: translateX(101%);
            transform: translateX(101%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@-webkit-keyframes dormilo-bar-appear {
  0% {
    -webkit-transform: scaleX(0%);
            transform: scaleX(0%);
  }
  100% {
    -webkit-transform: scaleX(100%);
            transform: scaleX(100%);
  }
}

@keyframes dormilo-bar-appear {
  0% {
    -webkit-transform: scaleX(0%);
            transform: scaleX(0%);
  }
  100% {
    -webkit-transform: scaleX(100%);
            transform: scaleX(100%);
  }
}

@-webkit-keyframes dormilo-bar-preCrawl {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes dormilo-bar-preCrawl {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes dormilo-bar-crawl {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes dormilo-bar-crawl {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.section__projects {
  position: relative;
  overflow: hidden;
  height: auto;
  width: auto;
  background-color: #141414;
  padding: 5rem 10vw;
  border-top: rgba(255, 255, 255, 0.3) 1px solid;
}

.overview {
  background-color: #141414;
  height: 90vh;
}

@media (min-width: 1200px) {
  .overview {
    height: 80vh;
  }
}

.overview--unDisplay {
  display: none;
}

.overview-wrapper {
  /* grid-area: overview; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: 1rem;
  width: 100%;
  height: 100%;
}

@media (min-width: 1200px) {
  .overview-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: unset;
        grid-template-rows: unset;
    grid-auto-rows: 20rem;
  }
}

.overview__image {
  z-index: 2;
  position: relative;
  width: 25%;
  height: 100%;
  /*  --overview-image--1: url(/assets/img/numb/numb--overview--1.jpg);
      --overview-image--2: url(/assets/img/numb/numb--overview--2.jpg);
      --overview-image--3: url(/assets/img/numb/numb--overview--3.jpg);
      --overview-image--4: url(/assets/img/numb/numb--overview--4.jpg); */
}

.overview__image__inner {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.overview__image__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overview__image__inner--transition {
  -webkit-transition: -webkit-transform 350ms ease-in-out;
  transition: -webkit-transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}

.overview__image__inner--active {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

.overview__image__inner--transToIndiv {
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
}

.overview__image:nth-child(1) .overview__image__inner {
  background-image: var(--overview-image--1);
}

.overview__image:nth-child(2) .overview__image__inner {
  background-image: var(--overview-image--2);
}

.overview__image:nth-child(3) .overview__image__inner {
  background-image: var(--overview-image--3);
}

.overview__image:nth-child(4) .overview__image__inner {
  background-image: var(--overview-image--4);
}

.overview__image::before {
  /*  content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 101%;
        background-color: white;
        transform: translate(-100%, 0); */
}

.overview__image__second-row {
  z-index: 1;
  position: relative;
  width: 25%;
  height: 100%;
  --overview-image-secondRow--1: ;
  --overview-image-secondRow--2: ;
  --overview-image-secondRow--3: ;
  --overview-image-secondRow--4: ;
}

.overview__image__second-row-wrapper {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overview__image__second-row__inner {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  -webkit-transition: -webkit-transform 350ms ease-in-out;
  transition: -webkit-transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out;
  transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}

.overview__image__second-row:nth-child(1) .overview__image__second-row__inner {
  background-image: var(--overview-image-secondRow--1);
}

.overview__image__second-row:nth-child(2) .overview__image__second-row__inner {
  background-image: var(--overview-image-secondRow--2);
}

.overview__image__second-row:nth-child(3) .overview__image__second-row__inner {
  background-image: var(--overview-image-secondRow--3);
}

.overview__image__second-row:nth-child(4) .overview__image__second-row__inner {
  background-image: var(--overview-image-secondRow--4);
}

.overview__image-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  --selection-background-image: ;
  /*   &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: var(--selection-background-image);
          background-position: center;
          background-size: cover;
        }  */
}

@media (min-width: 650px) {
  .overview__image-wrapper {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.overview__image-wrapper::before {
  /* z-index: 1;
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: color(transBlack);
          top: 0;
          left: 0;
          transition: transform 350ms ease-out; */
}

.overview__image-wrapper--appear::before, .overview__image-wrapper--appear::after {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.overview__image-wrapper__img-white {
  position: relative;
  height: 100%;
  width: 25%;
  background-color: white;
  z-index: 1;
  -webkit-transition: -webkit-transform 250ms ease-out;
  transition: -webkit-transform 250ms ease-out;
  transition: transform 250ms ease-out;
  transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
}

.overview__image-wrapper__img-white--appear {
  -webkit-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
}

.overview__image-wrapper__img-sideway {
  width: 25%;
  height: 100%;
  position: relative;
  --overviewImgTransition: transform 1000ms linear;
  overflow: hidden;
}

.overview__image-wrapper__img-sideway::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: var(--overviewImgTransition);
  transition: var(--overviewImgTransition);
}

.overview__image-wrapper__img-sideway--transition::before {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}

.overview__image-wrapper__img-sideway-wrapper {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

.overview__heading {
  z-index: 2;
  position: relative;
  overflow: hidden;
  /* padding: 1rem; */
  /* line-height: 1em;
    color: color(weiss); */
  margin-bottom: 2rem;
  /*  @include tablet-portrait {
      /* -webkit-text-stroke: 2px #fff;
      color: color(trans); */
  /*   @include text--whiteStroke;
      font-size: fontSize(l3); */
  /* padding: 2rem; */
  /* }

    @include tablet-landscape {
      font-size: fontSize(xl);
    } */
}

.overview__heading-container {
  position: relative;
  grid-area: overviewTitle;
  width: 100%;
  /* padding: 8rem 10vw 0; */
  background-color: #141414;
}

.overview__heading-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 
        background-color: color(transBlack); */
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
  -webkit-transition: -webkit-transform 250ms ease-out;
  transition: -webkit-transform 250ms ease-out;
  transition: transform 250ms ease-out;
  transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
}

.overview__heading-container--active::before {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.overview__titles {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  opacity: 0;
  -webkit-transition: opacity 150ms ease-out;
  transition: opacity 150ms ease-out;
  cursor: pointer;
}

.overview__titles:before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #3e3e3e;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 250ms ease-out;
  transition: -webkit-transform 250ms ease-out;
  transition: transform 250ms ease-out;
  transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
}

.overview__titles:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

@media (min-width: 1200px) {
  .overview__titles:after {
    content: none;
  }
}

.overview__titles--appear {
  opacity: 1;
}

.overview__titles-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  height: 100%;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  overflow: auto;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  position: absolute;
  z-index: 10;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  top: 2rem;
  right: 0;
}

@media (min-width: 321px) {
  .overview__titles-wrapper {
    top: 18rem;
  }
}

@media (min-width: 650px) {
  .overview__titles-wrapper {
    top: 20rem;
  }
}

@media (min-width: 1200px) {
  .overview__titles-wrapper {
    position: relative;
    z-index: unset;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    top: unset;
    right: unset;
    width: 100%;
  }
}

.overview__titles--active:before {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.overview__titles__h3 {
  z-index: 1;
  position: relative;
  /* font-size: fontSize(m2); */
  /* -webkit-text-stroke: 2px #fff; */
  /* color: rgba(0, 0, 0, 0); */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2rem;
  line-height: 1em;
  overflow: hidden;
  /*   @include tablet-portrait {
        font-size: fontSize(l1);
      }
      @include desktop-xl {
        font-size: fontSize(l2);
      }
      @include desktop-3xl {
        font-size: fontSize(l3);
      } */
}

.overview__titles--noPointer {
  cursor: default;
}

.overview__img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: flex-grow 500ms ease-in-out, -webkit-box-flex 500ms ease-in-out;
  transition: flex-grow 500ms ease-in-out, -webkit-box-flex 500ms ease-in-out;
  transition: flex-grow 500ms ease-in-out;
  transition: flex-grow 500ms ease-in-out, -webkit-box-flex 500ms ease-in-out, -ms-flex-positive 500ms ease-in-out;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 50rem;
}

.overview__img-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
}

.overview__img--big-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.overview__img.extend--desktop {
  -ms-grid-column: 4;
  -ms-grid-column-span: 6;
  grid-column: 4/10;
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  grid-row: 1/6;
}

.overview__img.extend--mobile {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
  grid-row: 2/5;
}

.overview__img:hover {
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
}

.overview__img__title {
  z-index: 2;
  overflow: hidden;
  padding: 1rem;
  line-height: 0.9em;
  color: #fff;
  font-size: 5rem;
  -webkit-transition: grid-column 1000ms ease-in-out;
  transition: grid-column 1000ms ease-in-out;
  transition: grid-column 1000ms ease-in-out, -ms-grid-column 1000ms ease-in-out;
  display: none;
}

@media (min-width: 650px) {
  .overview__img__title {
    /* -webkit-text-stroke: 2px #fff;
        color: color(trans); */
    color: #fff;
  }
  @supports (-webkit-text-stroke: 2px #fff) {
    .overview__img__title {
      -webkit-text-stroke: 2px #fff;
      color: rgba(0, 0, 0, 0);
    }
  }
}

@media (min-width: 1200px) {
  .overview__img__title {
    position: relative;
    font-size: 9rem;
  }
}

.overview__img--1 {
  position: relative;
  /* grid-column: 1;
        grid-row: 2/4; */
  background-image: url(/assets/img/privat/phillipe.jpg);
  /*  &::before {
            @include gallery__img__overlay;
          }
          &::after {
            @include gallery__img__overlay--dark;
          } */
}

@media (min-width: 1200px) {
  .overview__img--1 {
    /* grid-column: span 4;
          grid-row: span 3; */
  }
}

.overview__img--2 {
  background-image: url(/assets/img/heart/adrian.jpg);
  /*   grid-column: span 2;
        grid-row: span 3; */
}

.overview__img--3 {
  background-image: url(/assets/img/ritual/ritual--birdskull.jpg);
  background-position: center;
  /*  grid-column: span 2;
        grid-row: span 3; */
}

.overview__img--4 {
  background-image: url(/assets/img/forget/forget--pink.jpg);
  background-position: right;
  /*   grid-column: span 2;
        grid-row: span 3; */
}

.overview__img--5 {
  background-image: url(/assets/img/numb/numb-lighthouse.jpg);
  /* grid-column: span 2;
        grid-row: span 3; */
}

.overview__img--6 {
  background-image: url(/assets/img/gone/gone--net.jpg);
  /*  grid-column: span 4;
        grid-row: span 3; */
}

.overview__img--7 {
  background-image: url(/assets/img/gone/gone--net.jpg);
  /* grid-column: span 2;
        grid-row: span 3; */
}

.section__about {
  position: relative;
  overflow: hidden;
  height: auto;
  width: auto;
  background-color: #141414;
  padding: 5rem 10vw;
  border-top: rgba(255, 255, 255, 0.3) 1px solid;
}

.section__kontakt {
  position: relative;
  overflow: hidden;
  height: auto;
  width: auto;
  background-color: #141414;
  padding: 5rem 10vw;
  border-top: rgba(255, 255, 255, 0.3) 1px solid;
}

header {
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.9);
  width: 100vw;
  bottom: 0;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
}

header--dark {
  background-color: #fff;
}

@media (min-width: 1200px) {
  header {
    background-color: rgba(0, 0, 0, 0);
    bottom: unset;
    top: 0;
  }
}

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 1rem;
}

@media (min-width: 650px) {
  header nav {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media (min-width: 1200px) {
  header nav {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

header nav .logo {
  display: none;
  pointer-events: all;
  width: 13rem;
  padding: 1rem;
}

@media (min-width: 650px) {
  header nav .logo {
    display: block;
  }
}

header nav .logo--dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 698.17 149.24' fill='%23fff' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M85.3 11q13 6.8 18.13 21.48 5.13 14.67 5.14 40.66 0 27-5 42.76-5 15.76-18.13 23.27-13.1 7.54-37.42 7.54h-48V4.2h48q24.3 0 37.28 6.82zM68.22 116.1q6.6-5.44 8.6-15.6 2-10.17 2-29 0-16.77-2.1-25.37-2.1-8.6-8.64-12.7-6.5-4.08-20.12-4.08H28.93v92.27H48q13.62 0 20.23-5.5zm69.8 18.78q-12.26-14.36-12.26-40.77 0-26.2 12.26-40.45 12.26-14.26 35.95-14.25 23.7 0 35.95 14.25 12.26 14.25 12.26 40.45 0 26.42-12.26 40.77-12.26 14.35-35.95 14.36-23.7 0-35.95-14.36zM188.85 118q4.82-7.33 4.82-23.9 0-16.57-4.82-23.68-4.8-7.12-14.88-7.13-10.07-.01-14.88 7.13-4.83 7.13-4.82 23.68.01 16.55 4.82 23.9 4.8 7.33 14.88 7.33 10.07 0 14.88-7.33zm53.87-76.08h27.88v11.1q18-10.5 33.53-13.62v28.3A287.64 287.64 0 0 0 275 75.04l-4.2 1.47v70.2h-28.1zm77.98 0h27.88v5.87a83.49 83.49 0 0 1 13.52-6.39 36.57 36.57 0 0 1 12-2 42.08 42.08 0 0 1 14.15 2.41 26 26 0 0 1 11.21 7.44 98.85 98.85 0 0 1 18.64-7.43 65.89 65.89 0 0 1 17.71-2.41q19.5 0 27.67 11.94 8.17 11.94 8.17 38.57v56.8h-28.12v-56q0-14-3.15-20.12-3.15-6.12-11.74-6.08-6.07 0-16.13 2.93l-3.15 1.05q.84 14 .84 23.9v54.32h-28.1V92.86a95.66 95.66 0 0 0-1.15-17.19q-1.15-5.87-4.4-8.5-3.25-2.62-9.75-2.62a50.12 50.12 0 0 0-15.51 2.93l-2.5.84v78.4h-28.1zM496.54.2h28.1v28.3h-28.1zm0 41.7h28.1v104.8h-28.1zM551.88 0h28.08v146.72h-28.08zm62.14 134.88q-12.25-14.36-12.26-40.77 0-26.2 12.26-40.45 12.26-14.26 36-14.25 23.68 0 36 14.25 12.32 14.25 12.26 40.45 0 26.42-12.26 40.77-12.26 14.35-36 14.36-23.73 0-36-14.36zM664.85 118q4.82-7.33 4.82-23.9 0-16.57-4.82-23.68-4.83-7.12-14.88-7.13-10.05-.01-14.88 7.13-4.83 7.13-4.82 23.68.01 16.55 4.82 23.9 4.82 7.33 14.88 7.33 10.06 0 14.88-7.33z'/%3E%3C/svg%3E");
}

header nav .nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media (min-width: 1200px) {
  header nav .nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.nav-item {
  position: relative;
  pointer-events: all;
}

@media (min-width: 650px) {
  .nav-item {
    margin-right: 1rem;
  }
}

@media (min-width: 1200px) {
  .nav-item:not(:last-child) {
    margin-bottom: 1rem;
  }
}

@media (min-width: 1200px) {
  .nav-item::before {
    z-index: 10;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
  }
  .nav-item::after {
    z-index: 10;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #3e3e3e;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
    transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
  }
  .nav-item:hover, .nav-item:focus {
    /* &::before {
        transform: translateX(100%);
      } */
  }
  .nav-item:hover::after, .nav-item:focus::after {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

.nav-item a {
  z-index: 20;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "cairobold", "sans-serif";
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  padding: 0.25rem 1rem;
}

@media (min-width: 650px) {
  .nav-item a {
    font-size: 1.5rem;
    padding: 0.25rem 1rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

.gallery {
  background-color: #141414;
  height: 97vh;
  display: none;
}

@media (min-width: 1200px) {
  .gallery {
    height: 80vh;
  }
}

.gallery__g-headline {
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  grid-row: 1/6;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
  -ms-grid-column-align: start;
      justify-self: start;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-size: 4rem;
  font-family: "cairo";
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.3em;
}

.gallery__nav {
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 5;
  grid-row: 5;
  -ms-flex-item-align: start;
      align-self: start;
  justify-self: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  display: none;
}

@media (min-width: 1200px) {
  .gallery__nav {
    -ms-grid-column: 10;
    grid-column: 10;
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    grid-row: 1/6;
    -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
    -ms-grid-column-align: end;
        justify-self: end;
  }
}

.gallery__nav__title {
  color: rgba(0, 0, 0, 0.8);
}

.gallery__nav__btn {
  position: relative;
  width: 2.5rem;
  height: 2rem;
  border: none;
  margin-left: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}

.gallery__nav__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
  -webkit-transition: -webkit-transform 250ms ease-out;
  transition: -webkit-transform 250ms ease-out;
  transition: transform 250ms ease-out;
  transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
}

.gallery__nav__btn:hover::before {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.gallery__nav__btn--1 {
  background-color: coral;
}

.gallery__nav__btn--2 {
  background-color: rosybrown;
}

.gallery__nav__btn--3 {
  background-color: azure;
}

.gallery__nav__btn--4 {
  background-color: brown;
}

.gallery__nav__btn--5 {
  background-color: khaki;
}

.gallery__set-wrapper {
  /* grid-area: gallery; */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 3rem 1fr 1fr 1fr 3rem;
      grid-template-rows: 3rem 1fr 1fr 1fr 3rem;
  grid-gap: 1rem;
}

@media (min-width: 1200px) {
  .gallery__set-wrapper {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  }
}

.gallery__heading-wrapper {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3/4;
  -ms-grid-column: 1;
  grid-column: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

@media (min-width: 1200px) {
  .gallery__heading-wrapper {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2/4;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.gallery__heading {
  z-index: 2;
  overflow: hidden;
  padding: 2rem;
  line-height: 0.9em;
  color: #fff;
  opacity: 0;
  -webkit-transition: 150ms opacity ease-out;
  transition: 150ms opacity ease-out;
  /* 
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      /* background-color: color(transBlack); 
      z-index: -1;
      top: 50%;
      right: 0;
      bottom: 0;
      transition: transform 250ms ease-out;
      transform: translate(101%, -50%);
    }
    &--appear::before {
      transform: translate(0%, -50%);
    } */
}

@media (min-width: 650px) {
  .gallery__heading {
    -webkit-text-stroke: 2px #fff;
    color: rgba(0, 0, 0, 0);
  }
}

@media (min-width: 1200px) {
  .gallery__heading {
    position: relative;
  }
}

.gallery__heading--appear {
  opacity: 1;
}

.gallery__fullSetBtn-wrapper {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 5;
  grid-row: 5;
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  overflow: hidden;
  display: none;
}

@media (min-width: 1200px) {
  .gallery__fullSetBtn-wrapper {
    -ms-grid-column: 9;
    grid-column: 9;
    -ms-grid-row: 1;
    grid-row: 1;
    padding-bottom: unset;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

.gallery__fullSetBtn__text {
  color: rgba(0, 0, 0, 0.8);
}

.gallery__allSetsBtn-wrapper {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 1;
  grid-row: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /*  @include desktop {
      grid-column: 1/3;
      grid-row: 1;
    } */
}

.gallery__allSetsBtn {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.gallery__allSetsBtn__arrow {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 98.3'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eback-arrow--whitesvg%3C/title%3E%3Cpolygon class='cls-1' points='170 41.52 28.96 41.52 59.55 10.93 48.63 0 0 49.25 48.63 98.3 59.55 87.37 29.16 56.98 170 56.98 170 41.52'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}

.gallery__allSetsBtn__arrow-container {
  position: relative;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.gallery__allSetsBtn__arrow-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3e3e3e;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 150ms ease-out;
  transition: -webkit-transform 150ms ease-out;
  transition: transform 150ms ease-out;
  transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
}

.gallery__allSetsBtn__text {
  color: #fff;
}

.gallery__allSetsBtn:hover .gallery__allSetsBtn__arrow-container::before {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.gallery__img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  overflow: hidden;
  cursor: pointer;
}

.gallery__img:hover .gallery__img__zoom-container::before {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.gallery__img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.gallery__img.extend--desktop {
  -ms-grid-column: 4;
  -ms-grid-column-span: 6;
  grid-column: 4/10;
  -ms-grid-row: 1;
  -ms-grid-row-span: 5;
  grid-row: 1/6;
  background-size: 70%;
}

.gallery__img.extend--desktop .gallery__img__zoom {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 169.51 169.51'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ezoom-out--white%3C/title%3E%3Cpolygon class='cls-1' points='54.05 169.51 54.05 107.87 69.07 100.3 69.51 169.51 54.05 169.51'/%3E%3Cpolygon class='cls-1' points='0 115.45 61.63 115.45 69.07 100.3 0 100 0 115.45'/%3E%3Cpolygon class='cls-1' points='169.51 54.05 107.87 54.05 100.3 69.07 169.51 69.51 169.51 54.05'/%3E%3Cpolygon class='cls-1' points='115.45 0 115.45 61.63 100.3 69.07 100 0 115.45 0'/%3E%3C/svg%3E");
}

.gallery__img.extend--mobile {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
  grid-row: 2/5;
  background-size: 70%;
}

.gallery__img.extend--mobile .gallery__img__zoom {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 169.51 169.51'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ezoom-out--white%3C/title%3E%3Cpolygon class='cls-1' points='54.05 169.51 54.05 107.87 69.07 100.3 69.51 169.51 54.05 169.51'/%3E%3Cpolygon class='cls-1' points='0 115.45 61.63 115.45 69.07 100.3 0 100 0 115.45'/%3E%3Cpolygon class='cls-1' points='169.51 54.05 107.87 54.05 100.3 69.07 169.51 69.51 169.51 54.05'/%3E%3Cpolygon class='cls-1' points='115.45 0 115.45 61.63 100.3 69.07 100 0 115.45 0'/%3E%3C/svg%3E");
}

.gallery__img__zoom {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129.51 129.51'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ezoom-in--white%3C/title%3E%3Cpolygon class='cls-1' points='15.46 60 15.46 121.64 0.44 129.21 0 60 15.46 60'/%3E%3Cpolygon class='cls-1' points='69.51 114.05 7.87 114.05 0.44 129.21 69.51 129.51 69.51 114.05'/%3E%3Cpolygon class='cls-1' points='60 15.46 121.64 15.46 129.21 0.44 60 0 60 15.46'/%3E%3Cpolygon class='cls-1' points='114.05 69.51 114.05 7.87 129.21 0.44 129.51 69.51 114.05 69.51'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.gallery__img__zoom-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  margin: 1rem;
  background-color: #141414;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.gallery__img__zoom-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3e3e3e;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 150ms ease-out;
  transition: -webkit-transform 150ms ease-out;
  transition: transform 150ms ease-out;
  transition: transform 150ms ease-out, -webkit-transform 150ms ease-out;
}

.gallery__img__zoom--out {
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 169.51 169.51'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ezoom-out--white%3C/title%3E%3Cpolygon class='cls-1' points='54.05 169.51 54.05 107.87 69.07 100.3 69.51 169.51 54.05 169.51'/%3E%3Cpolygon class='cls-1' points='0 115.45 61.63 115.45 69.07 100.3 0 100 0 115.45'/%3E%3Cpolygon class='cls-1' points='169.51 54.05 107.87 54.05 100.3 69.07 169.51 69.51 169.51 54.05'/%3E%3Cpolygon class='cls-1' points='115.45 0 115.45 61.63 100.3 69.07 100 0 115.45 0'/%3E%3C/svg%3E");
}

.gallery__img--1 {
  position: relative;
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2/4;
  /* @include privat--phillipe; */
  /*  &::after {
        @include gallery__img__overlay--dark;
      } */
  /*  &.darkOverlay--dissapear {
        &::after {
          transform: translateY(100%);
        }
      } */
}

@media (min-width: 1200px) {
  .gallery__img--1 {
    -ms-grid-column: 4;
    -ms-grid-column-span: 2;
    grid-column: 4/6;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    grid-row: 1/4;
  }
}

.gallery__img--1::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1%;
  width: 105%;
  height: 101%;
  background-color: #141414;
  z-index: 4;
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  transition: -webkit-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
}

.gallery__img--1.img--appear::before {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.gallery__img--2 {
  position: relative;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 2;
  grid-row: 2;
  /*  @include privat--vejile; */
  /*  &::after {
        @include gallery__img__overlay--dark;
      } */
  /*   &.darkOverlay--dissapear {
        &::after {
          transform: translateY(100%);
        }
      } */
}

@media (min-width: 1200px) {
  .gallery__img--2 {
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-column: 3/6;
    -ms-grid-row: 4;
    -ms-grid-row-span: 2;
    grid-row: 4/6;
  }
}

.gallery__img--2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1%;
  width: 105%;
  height: 101%;
  background-color: #141414;
  z-index: 4;
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  transition: -webkit-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
}

.gallery__img--2.img--appear::before {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.gallery__img--3 {
  position: relative;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  -ms-grid-row: 4;
  grid-row: 4;
  /*  @include privat--privat; */
  /*  &::after {
        @include gallery__img__overlay--dark;
      } */
  /* &.darkOverlay--dissapear {
        &::after {
          transform: translateY(100%);
        }
      } */
}

@media (min-width: 650px) {
  .gallery__img--3 {
    background-position: 0 -10vh;
  }
}

@media (min-width: 1200px) {
  .gallery__img--3 {
    background-position: top;
    -ms-grid-column: 6;
    -ms-grid-column-span: 4;
    grid-column: 6/10;
    -ms-grid-row: 2;
    -ms-grid-row-span: 3;
    grid-row: 2/5;
  }
}

.gallery__img--3::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1%;
  width: 105%;
  height: 101%;
  background-color: #141414;
  z-index: 4;
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  transition: -webkit-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
}

.gallery__img--3.img--appear::before {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.section__onPageNav {
  width: 100vw;
  height: auto;
  max-height: 4rem;
  overflow: hidden;
  text-align: right;
  position: relative;
  -webkit-transition: max-height 250ms ease-out;
  transition: max-height 250ms ease-out;
  display: none;
}

.section__onPageNav:hover, .section__onPageNav:visited {
  max-height: 50rem;
}

.section__onPageNav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 101%;
  background-color: #191919;
  -webkit-transition: -webkit-transform 250ms ease-out;
  transition: -webkit-transform 250ms ease-out;
  transition: transform 250ms ease-out;
  transition: transform 250ms ease-out, -webkit-transform 250ms ease-out;
}

.section__onPageNav .onPageNav__headline {
  position: relative;
  font-size: 2.5rem;
  padding-right: 10vw;
  color: #fff;
  height: 50%;
}

.section__onPageNav .onPageNav__navPoint {
  color: #fff;
  font-size: 10rem;
  padding-right: 10vw;
  position: relative;
}

* {
  scrollbar-color: #fff rgba(0, 0, 0, 0.8);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 1rem;
}

*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.8);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  height: 5rem;
}

footer {
  background-color: #141414;
  padding-bottom: 5rem;
  border-top: rgba(255, 255, 255, 0.3) 1px solid;
}

@media (min-width: 650px) {
  footer {
    padding-bottom: 6rem;
  }
}

@media (min-width: 1200px) {
  footer {
    padding: unset;
  }
}

footer .footer-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 5rem;
  height: 18rem;
}

@media (min-width: 650px) {
  footer .footer-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 5rem 10vw;
    height: 10rem;
  }
}

@media (min-width: 1200px) {
  footer .footer-nav {
    padding: 5rem 20vw;
  }
}

footer .footer-nav .logo {
  display: none;
  pointer-events: all;
  width: 13rem;
  padding: unset;
}

@media (min-width: 1200px) {
  footer .footer-nav .logo {
    display: block;
  }
}

footer .footer-nav .footer-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

footer .footer-nav .footer-links .footer-nav-list {
  display: none;
}

@media (min-width: 1200px) {
  footer .footer-nav .footer-links .footer-nav-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

footer .footer-nav .footer-links .footer-nav-list .nav-item--footer {
  margin: unset;
}

footer .footer-nav .footer-links .footer-nav-list .nav-item--footer a {
  font-size: 1.3rem;
  padding: 0.125rem 0.5rem;
}

footer .footer-nav .footer-links .footer-nav-list .nav-item--footer:not(:last-child) {
  margin-right: 1rem;
}

@media (min-width: 1200px) {
  footer .footer-nav .footer-links .footer-nav-list .nav-item--footer::after {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

footer .footer-nav .footer-links .footer-nav-list .nav-item--footer:hover::after, footer .footer-nav .footer-links .footer-nav-list .nav-item--footer:focus::after {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

footer .footer-nav .footer-links .dsgvo-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .footer-nav .footer-links .dsgvo-links .dsgvo-link:not(:last-child) {
  margin-right: 1rem;
}

footer .footer-nav .footer-links .dsgvo-links .dsgvo-link a {
  color: #fff;
}

@media (min-width: 650px) {
  footer .footer-nav .footer-links .dsgvo-links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  footer .footer-nav .footer-links .dsgvo-links .dsgvo-link:not(:last-child) {
    margin-bottom: 1rem;
  }
}

@media (min-width: 1200px) {
  footer .footer-nav .footer-links .dsgvo-links {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  footer .footer-nav .footer-links .dsgvo-links .dsgvo-link:not(:last-child) {
    margin-bottom: unset;
    margin-right: 1rem;
  }
}

footer .footer-nav .footer-contact {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

footer .footer-nav .footer-contact h4,
footer .footer-nav .footer-contact a,
footer .footer-nav .footer-contact p {
  color: #fff;
}

footer .footer-nav .footer-contact h4 {
  margin-bottom: 1rem;
}

@media (min-width: 1200px) {
  footer .footer-nav .footer-contact {
    -webkit-box-ordinal-group: unset;
        -ms-flex-order: unset;
            order: unset;
  }
}

footer .footer-copyright {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background-color: #141414;
  border-top: rgba(255, 255, 255, 0.3) 1px solid;
  padding: 1rem 20vw;
}

footer .footer-copyright p,
footer .footer-copyright a {
  color: #fff;
}

footer .footer-copyright p {
  padding: 0;
}

footer .footer-copyright--mobile {
  border: unset;
  padding: 0;
}

footer .footer-copyright--mobile p {
  padding: unset;
}

@media (min-width: 1200px) {
  footer .footer-copyright--mobile {
    display: none;
  }
}

footer .footer-copyright--desktop {
  display: none;
}

@media (min-width: 1200px) {
  footer .footer-copyright--desktop {
    display: block;
  }
}

#impressum,
#datenschutz {
  background-color: #141414;
  padding: 5rem;
}

@media (min-width: 1200px) {
  #impressum,
  #datenschutz {
    padding: 10rem 10vw 5rem;
  }
}

#impressum h1,
#impressum h2,
#impressum h3,
#impressum h4,
#impressum a,
#impressum p,
#datenschutz h1,
#datenschutz h2,
#datenschutz h3,
#datenschutz h4,
#datenschutz a,
#datenschutz p {
  color: #fff;
}

#impressum h1,
#datenschutz h1 {
  font-size: 10em;
  overflow: hidden;
}

#impressum h2,
#datenschutz h2 {
  font-size: 6em;
}

#impressum h3,
#datenschutz h3 {
  font-size: 4em;
  margin-bottom: 2rem;
}

#impressum h4,
#datenschutz h4 {
  margin-bottom: 1rem;
  overflow: hidden;
}

#impressum p,
#datenschutz p {
  margin-bottom: 2rem;
}
/*# sourceMappingURL=main.css.map */