@charset "UTF-8";
@font-face {
  font-family: "Compostable";
  src: url("../fonts/compostable_punk05.ttf");
}
html,
body {
  z-index: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

#marieeve {
  position: relative;
}
#marieeve a,
#marieeve button,
#marieeve input,
#marieeve label {
  cursor: pointer;
}
#marieeve *,
#marieeve *:after,
#marieeve *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#marieeve ul,
#marieeve li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#marieeve .h1 {
  font-family: "Compostable";
  position: absolute;
  font-size: 3rem;
  line-height: 2.9rem;
  margin: 0;
  font-weight: normal;
  color: #f0fdad;
  text-shadow: 2px 0px 0px rgb(138, 11, 85), -2px 0px 0px rgb(138, 11, 85), 0px -2px 0px rgb(138, 11, 85), 0px 2px 0px rgb(138, 11, 85);
  transition: all 0.25s ease;
  font-weight: bold;
}
@media (max-width: 710px) {
  #marieeve .h1 {
    font-size: 12rem;
    line-height: 10rem;
    position: relative;
  }
  #marieeve .h1 br {
    display: none;
  }
}
#marieeve:has(.cta_font.active) .h1 {
  font-family: "Season", sans-serif;
  font-variation-settings: "wght" 700, "SERF" 0, "ital" 0;
  color: #f0fdad;
  text-shadow: 2px 0px 0px rgb(138, 11, 85), -2px 0px 0px rgb(138, 11, 85), 0px -2px 0px rgb(138, 11, 85), 0px 2px 0px rgb(138, 11, 85);
  font-size: 2.75rem;
}
@media (max-width: 710px) {
  #marieeve:has(.cta_font.active) .h1 {
    font-size: 9rem;
  }
}
#marieeve .controlwrapper {
  position: sticky;
  top: 2.5rem;
  padding-top: 0.5rem;
  overflow: visible;
  z-index: 10000000000;
  text-align: right;
  padding-right: 0.25rem;
  pointer-events: none;
  margin-bottom: -4rem;
}
#marieeve .controlwrapper .cta_font, #marieeve .controlwrapper .pulse-dot {
  pointer-events: auto;
}
@media (max-width: 710px) {
  #marieeve .controlwrapper {
    margin-bottom: -11.5vw;
    top: 8vw;
  }
}
#marieeve .cta_font {
  border: none;
  background: transparent;
  z-index: 1;
  font-family: "Season", sans-serif;
  font-variation-settings: "wght" 700, "SERF" 0, "ital" 0;
  font-size: 3.5rem;
  line-height: 3.5rem;
  margin-right: 0.25vw;
  color: #f0fdad;
  text-shadow: 2px 0px 0px rgb(138, 11, 85), -2px 0px 0px rgb(138, 11, 85), 0px -2px 0px rgb(138, 11, 85), 0px 2px 0px rgb(138, 11, 85);
  height: 3.5rem;
  display: inline-block;
}
#marieeve .cta_font .fancy {
  font-family: "Compostable";
  font-size: 4rem;
  line-height: 3.5rem;
}
#marieeve .cta_font .aerow {
  display: inline-block;
  transform-origin: center center;
  width: 3.5rem;
  line-height: 3.5rem;
  height: 3.5rem;
  transition: all 0.25s linear;
}
#marieeve .cta_font.active .aerow {
  transform: rotate(-180deg);
}
@media (max-width: 710px) {
  #marieeve .cta_font.active .aerow {
    line-height: 7.25rem;
  }
}
@media (max-width: 710px) {
  #marieeve .cta_font {
    font-size: 10.5rem;
    line-height: 10.5rem;
    top: auto;
    bottom: 0rem;
    height: 11rem;
    text-shadow: 2px 0px 0px rgb(138, 11, 85), -2px 0px 0px rgb(138, 11, 85), 0px -2px 0px rgb(138, 11, 85), 0px 2px 0px rgb(138, 11, 85);
  }
  #marieeve .cta_font .fancy {
    font-family: "Compostable";
    font-size: 12rem;
    line-height: 10.5rem;
  }
  #marieeve .cta_font .aerow {
    width: 7rem;
    line-height: 8.25rem;
    height: 7rem;
    margin-right: -1rem;
  }
}
#marieeve .pulse-dot {
  background: transparent;
  z-index: 1;
  font-family: "Season", sans-serif;
  font-variation-settings: "wght" 700, "SERF" 0, "ital" 0;
  font-size: 3.5rem;
  line-height: 3.5rem;
  color: #f0fdad;
  text-shadow: 2px 0px 0px rgb(138, 11, 85), -2px 0px 0px rgb(138, 11, 85), 0px -2px 0px rgb(138, 11, 85), 0px 2px 0px rgb(138, 11, 85);
  height: 3rem;
  display: inline-block;
  position: relative;
  margin: 0;
  margin-right: 5rem;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: visible;
}
#marieeve .pulse-dot.active span {
  top: 3rem;
}
#marieeve .pulse-dot span {
  position: absolute;
  transition: all 0.25s ease;
  left: 0;
  top: 1.65rem;
  display: inline-block;
  width: 100%;
  height: 0.6rem;
  background: #f0fdad;
  border: 0.1rem solid #7c104a;
}
@media (max-width: 710px) {
  #marieeve .pulse-dot {
    right: auto;
    top: auto;
    bottom: 0rem;
    left: 1rem;
    font-size: 10.5rem;
    line-height: 10.5rem;
    text-shadow: 2px 0px 0px rgb(138, 11, 85), -2px 0px 0px rgb(138, 11, 85), 0px -2px 0px rgb(138, 11, 85), 0px 2px 0px rgb(138, 11, 85);
  }
  #marieeve .pulse-dot.active span {
    top: 8.5rem;
  }
  #marieeve .pulse-dot span {
    top: 4rem;
    height: 1.5rem;
    background: #f0fdad;
    border: 0.5rem solid #7c104a;
  }
}
#marieeve .arrow {
  border: none;
  background: transparent;
  font-family: "Season", sans-serif;
  font-variation-settings: "wght" 700, "SERF" 0, "ital" 0;
  font-size: 3.75rem;
  line-height: 3.5rem;
  color: #f0fdad;
  text-shadow: 2px 0px 0px rgb(138, 11, 85), -2px 0px 0px rgb(138, 11, 85), 0px -2px 0px rgb(138, 11, 85), 0px 2px 0px rgb(138, 11, 85);
  height: 3.5rem;
  display: block;
  position: absolute;
  top: calc(50vh - 1rem);
  right: 2rem;
  z-index: 999999;
}
#marieeve .arrow.prev {
  left: 2rem;
  right: auto;
}
@media (max-width: 710px) {
  #marieeve .arrow {
    font-size: 10.5rem;
    line-height: 10.5rem;
  }
}
#marieeve img,
#marieeve video {
  width: 100%;
  height: auto;
}
#marieeve model-viewer::part(default-progress-bar) {
  display: none !important;
}
#marieeve .section {
  background-size: cover;
  background-position: center center;
  position: relative;
  min-height: 150vh;
}
#marieeve .section1 {
  margin-top: 0;
  padding-top: 0;
  min-height: 100vh;
  padding-top: 10vh;
  z-index: 9;
}
#marieeve .section2 {
  z-index: 8;
  min-height: 100vh;
  background-size: initial;
  background-position: center center;
}
#marieeve .section3 {
  position: relative;
  z-index: 9;
  min-height: 250vh;
  background-position: top center;
}
#marieeve .section4 {
  position: relative;
  background-position: top center;
  z-index: 11;
  margin-top: -20vh;
  min-height: 260vh;
}
#marieeve .sectionX {
  margin-top: -10vh;
  height: 110vh;
  z-index: 10;
  height: auto;
  min-height: auto;
  padding-top: 0;
  mask-image: none;
}
#marieeve .sectionX video,
#marieeve .sectionX img {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 10vh, rgb(0, 0, 0) 100%);
}
#marieeve .section4 > .slideshow {
  --slide-max-size: min(50rem, 60vh);
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  overflow: hidden;
  width: 100rem;
  height: 100vh;
  margin: 0;
  transform: translate(-50%, -50%);
  isolation: isolate;
  perspective: 700px;
  perspective-origin: 50% 50%;
}
@media (max-width: 710px) {
  #marieeve .section4 > .slideshow {
    margin-top: 10vh;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    perspective: none;
  }
}
#marieeve .slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--slide-max-size);
  height: var(--slide-max-size);
  transform: translate3d(-50%, -50%, 0) scale(0.92);
  opacity: 0;
  z-index: 1;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease, left 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#marieeve .slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--slide-max-size);
  max-height: var(--slide-max-size);
  object-fit: contain;
  box-shadow: 0 0 1.5rem 1.5rem #f0fdad;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
#marieeve .slide.is-active {
  transform: translate3d(-50%, -50%, 0) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}
#marieeve .slide.is-before {
  left: 0;
  transform: translate3d(-110%, -50%, 0) scale(1);
}
#marieeve .slide.is-after {
  left: 100%;
  transform: translate3d(10%, -50%, 0) scale(1);
}
#marieeve .slide.is-prev,
#marieeve .slide.is-next {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}
#marieeve .slide.is-prev {
  left: 0;
  transform: translate3d(-65%, -50%, 0) scale(1);
}
#marieeve .slide.is-next {
  left: 100%;
  transform: translate3d(-35%, -50%, 0) scale(1);
}
#marieeve .slide.is-prev:hover {
  z-index: 4;
}
#marieeve .slide.is-next:hover {
  z-index: 4;
}
#marieeve .slide.is-prev:hover img,
#marieeve .slide.is-next:hover img {
  transform: scale(1.04);
  box-shadow: 0 0 4.5rem rgb(255, 255, 255);
}
#marieeve .overlay {
  width: 100rem;
  height: 100vh;
  transform: rotate(180deg);
  position: fixed;
  pointer-events: none;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 40;
}
#marieeve .overlay .section:last-of-type {
  margin-bottom: 10vh;
}
#marieeve .overlay .model1,
#marieeve .overlay .model2,
#marieeve .overlay .model3 {
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}
#marieeve .overlay .model1 {
  margin-left: 5rem;
  width: 30rem;
  height: 30rem;
}
#marieeve .overlay .model2 {
  margin-left: 35rem;
  width: 50rem;
  height: 50rem;
}
#marieeve .overlay .model3 {
  margin-left: 55rem;
  width: 40rem;
  height: 40rem;
}
#marieeve .overlay .model1_wrapper,
#marieeve .overlay .model2_wrapper,
#marieeve .overlay .model3_wrapper {
  overflow: visible;
  position: relative;
}
#marieeve .overlay .model1_wrapper {
  width: 100rem;
  height: 60vh;
  position: relative;
  margin-top: var(--contentwrapper-offset, 0px);
}
#marieeve .overlay .model2_wrapper {
  width: 100rem;
  height: 80vh;
  position: relative;
}
#marieeve .overlay .model3_wrapper {
  width: 100rem;
  height: 100vh;
  position: relative;
}
#marieeve .overlay .stretcher {
  display: block;
  height: 550vh;
  width: 100rem;
}
@media (max-width: 500px) {
  #marieeve .overlay .model1,
  #marieeve .overlay .model2,
  #marieeve .overlay .model3 {
    transform: scale(1.5);
    transform-origin: center center;
  }
}
@keyframes pointerEvents {
  0% {
    pointer-events: auto;
  }
  99% {
    pointer-events: auto;
  }
  100% {
    pointer-events: none;
  }
}
@keyframes imgFadeEffect {
  0% {
    filter: contrast(1) saturate(1) brightness(1);
    opacity: 1;
  }
  99% {
    filter: contrast(10) saturate(0) brightness(10);
    opacity: 0.01;
  }
  100% {
    filter: contrast(10) saturate(0) brightness(10);
    opacity: 0.01;
  }
}
#marieeve .haufen {
  --haufen-img-max-w: min(70rem, 50vmin);
  --haufen-img-max-h: min(80vh, 80vmin);
  width: 100rem;
  height: 100vh;
  perspective: min(40rem, 40vh);
  perspective-origin: 50% 45%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  overflow: visible;
  pointer-events: none;
  transform-style: preserve-3d;
  /* Solange eine Karte hover hat: andere ignorieren die Maus → kein Zitter/Flicker durch Z-Wechsel */
}
#marieeve .haufen:has(.item:hover) .item:not(:hover) {
  pointer-events: none !important;
}
@media (max-width: 710px) {
  #marieeve .haufen {
    margin-top: 10vh;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    perspective: none;
    --haufen-img-max-w: min(calc(70rem * 1.5), calc(50vmin * 1.5));
    --haufen-img-max-h: min(calc(80vh * 1.5), calc(80vmin * 1.5));
  }
}
#marieeve .haufen .item {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translateZ(var(--haufen-z, 0px)) rotateX(var(--haufen-rotate-x, 0deg)) rotateY(var(--haufen-rotate-y, 0deg)) rotate(var(--haufen-rotate, 0deg)) skewX(var(--haufen-skew-x, 0deg)) skewY(var(--haufen-skew-y, 0deg));
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: pointerEvents 5s ease 1s 1 forwards;
  animation-play-state: paused;
}
#marieeve .haufen .item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, rgb(0, 0, 0) 26%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse at center, rgb(0, 0, 0) 26%, rgba(0, 0, 0, 0) 100%);
}
#marieeve .haufen .item img {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: var(--haufen-img-max-w);
  max-height: var(--haufen-img-max-h);
  object-fit: contain;
  animation: imgFadeEffect 5s ease 1s 1 forwards;
  animation-play-state: paused;
  transition: all 5s ease;
}
#marieeve .haufen .item:hover {
  z-index: 999;
  animation-play-state: running;
  /* Etwas über max. Random-z (72px); große Werte wirken wie Riesen-Scale + Flackern */
  --haufen-z: 88px !important;
  --haufen-rotate-x: 0deg !important;
  --haufen-rotate-y: 0deg !important;
  --haufen-rotate: 0deg !important;
  --haufen-skew-x: 0deg !important;
  --haufen-skew-y: 0deg !important;
}
#marieeve .haufen .item:hover img {
  animation-play-state: running;
}
#marieeve .section1 .h1 {
  width: 96rem;
  left: 2rem;
  margin-bottom: 10vh;
}
#marieeve .section2 .h1 {
  top: auto;
  bottom: 0;
  left: 2rem;
  width: 96rem;
}
#marieeve .section2 .h1:first-of-type {
  width: 88rem;
  top: -2.5vh;
  left: 10rem;
}
#marieeve .section3 .h1 {
  bottom: 20vh;
  left: 10rem;
  width: 88rem;
}
#marieeve .section3 .h1:first-of-type {
  width: 78rem;
  top: 30vh;
  left: 20rem;
}
@media (max-width: 710px) {
  #marieeve .section3 .h1:first-of-type {
    left: 5rem;
  }
}
#marieeve .section4 .h1 {
  top: auto;
  bottom: 10vh;
  left: 6rem;
  width: 96rem;
}
#marieeve .section4 .h1:first-of-type {
  width: 88rem;
  top: 30vh;
  left: 10rem;
}
@media (max-width: 710px) {
  #marieeve .sectionX {
    height: 110vh;
    min-height: 110vh;
  }
  #marieeve .sectionX img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.contentwrapperX {
  padding-bottom: 2rem;
}

.blur {
  pointer-events: none;
  height: calc(100vh - 3rem);
  overflow: hidden;
}
.blur > *:not(.popup) {
  filter: blur(5px);
}
.blur .overlay, .blur .controlwrapper {
  visibility: hidden;
}

.popup {
  z-index: 44;
  position: absolute;
  pointer-events: auto !important;
  width: 50%;
  height: auto;
  left: 25%;
  top: 3rem;
  border: 0.1rem solid #7c104a;
  padding: 1vw !important;
  max-height: calc(100vh - 9rem);
  background-color: #f0fdad;
  transition: all 0.5s ease;
}
.popup.hidden {
  opacity: 0;
  pointer-events: none !important;
}
.popup .pop {
  border: 0.1rem solid #7c104a;
  margin-top: 1vw !important;
  background-color: #f0fdad;
  padding: 0.5vw !important;
  width: 50%;
  margin-left: calc(25% - 1vw) !important;
  font-variation-settings: "wght" 800, "SERF" 0, "ital" 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
@media (max-width: 710px) {
  .popup {
    width: calc(100% - 6rem);
    border: 0.3rem solid #7c104a;
    left: 3rem;
    padding: 1.5vw !important;
  }
  .popup .pop {
    margin-top: 3rem !important;
    font-size: 3.75rem;
    line-height: 4.5rem;
    border: 0.3rem solid #7c104a;
  }
}