@charset "UTF-8";
/* Scrollbars etc im darkmode */
:root {
  color-scheme: dark;
}

/* Media Queries */
.desktop {
  display: block;
}
@media (max-width: 800px) {
  .desktop {
    display: none;
  }
}

.mobile {
  display: none;
}
@media (max-width: 800px) {
  .mobile {
    display: block;
  }
}

html {
  max-width: 100vw;
}

.container-center {
  margin: auto;
}
@media (max-width: 1160px) {
  .container-center.playmo {
    overflow: hidden;
    padding-bottom: 300px;
  }
}
@media (max-width: 1160px) {
  .container-center.neg300pad {
    margin-top: -300px;
  }
}

body {
  margin: 0;
  background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(24, 0, 36) 18%, rgb(24, 4, 36) 35%, rgb(0, 0, 0) 54%, rgb(0, 7, 44) 68%, rgb(0, 7, 44) 82%, rgb(0, 0, 0) 100%);
  color: white;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  --spacing: 100px;
  background-size: 200% 100%;
}

/* Typography Styles */
h1 {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 64px;
  line-height: 64px;
  color: white;
  margin: 20px 0px;
  padding: 20px;
}

h2 {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 64px;
  line-height: 64px;
  color: white;
  margin: 20px 0px;
}

h3 {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 26px;
  line-height: 32px;
  color: white;
  margin: 20px 0px;
}

h4 {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  color: white;
  margin: 20px 0px;
}

h5 {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: white;
  margin: 20px 0px;
}

p {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  color: white;
  opacity: 0.75;
}

sub {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 28px;
  color: white;
  opacity: 0.5;
  display: flex;
}

.akgro-regular {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.akgro-bold {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
}

.novel-light {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.novel-regular {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.novel-medium {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.novel-bold {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Color Styles */
.gradient-text {
  background: linear-gradient(285deg, #eee, #a69aed);
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-header {
  background: linear-gradient(60deg, #ff002b, #8000ff);
  background-size: 300% 300%;
  background-position: 0 50%;
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: moveGradient 8s infinite, expand-spacing 3s cubic-bezier(0.32, 0.46, 0.06, 1.19) forwards;
}

@keyframes expand-spacing {
  from {
    letter-spacing: 0px;
  }
  to {
    letter-spacing: 7px;
  }
}
.gradient-black {
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.gradient-purple {
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6509803922) 0%, rgba(189, 98, 98, 0.6509803922) 50%, rgba(59, 0, 137, 0.5490196078) 100%);
  pointer-events: none;
}

.logo {
  margin-right: 15px;
  margin-left: 15px;
  margin-top: 30px;
}
@media (max-width: 800px) {
  .logo {
    margin-right: 7.5px;
    margin-left: 7.5px;
    margin-top: 30px;
  }
}

.gradient-border {
  --border-width: 2px;
  --border-radius: 10px;
  position: relative;
  color: white;
  background: black;
  border-radius: var(--border-radius);
  padding: 10px 30px;
}
.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: linear-gradient(285deg, #eee, #a69aed);
  border-radius: var(--border-radius);
}
.gradient-border:hover {
  background: none;
  cursor: default;
}
.gradient-border:hover .speechthing {
  margin-top: 0px;
}
.gradient-border .speechthing {
  background: linear-gradient(285deg, #eee, #a69aed);
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(45deg);
  right: 35px;
  border-radius: 7px;
  margin-top: -50px;
  z-index: -2;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .gradient-border .speechthing {
    margin-top: -40px;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
.background-meshgradient {
  background-color: #000000;
  width: 100%;
  height: 200%;
  position: fixed;
  overflow: hidden;
  z-index: -200;
  top: 0;
  left: 0;
  opacity: 0.7;
}

canvas#canvas-meshgradient {
  z-index: -1;
  position: absolute;
  width: 100%;
  overflow-x: hidden;
  height: 60%;
  transform: rotate(0deg) scale(2) translateY(0%);
  --gradient-color-1: #10003b;
  --gradient-color-2: #000000;
  --gradient-color-3: #180024;
  --gradient-color-4: #00072c;
  --gradient-speed: 0.000014;
}

.aboutImageContainer {
  object-fit: contain;
}

#CrewContainer {
  height: 80%;
  pointer-events: none;
}
@media (max-width: 800px) {
  #CrewContainer {
    height: 100%;
  }
}
#CrewContainer:hover :last-child {
  opacity: 1;
}

#waswirhoeren {
  font-size: 16pt;
  padding-right: 5ch;
  width: 28ch;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}
@media (max-width: 800px) {
  #waswirhoeren {
    width: 78%;
  }
}
#waswirhoeren span {
  margin-left: 30px;
}

#sonos {
  position: absolute;
  left: 0;
  height: 360px;
  /* width: 100%; */
  margin-top: -212px;
  z-index: -2;
  margin-left: 220px;
}

.sonos {
  position: absolute;
  left: 0;
  width: 100%;
  height: 360px;
  margin-top: -213px;
  z-index: -2;
  background-image: url("../Assets/Sonos.png"); /* fallback for non image-set browser */
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: 65%;
}
@media (max-width: 800px) {
  .sonos {
    margin-top: -230px;
    background-size: 50%;
    background-position-x: 290px;
  }
}

/* Standard syntax */
@keyframes infinite-rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.floaty {
  position: absolute;
}

#joyconLinks {
  margin-left: 600px;
}
@media (max-width: 1920px) {
  #joyconLinks {
    right: 100px;
    margin-left: 0px;
  }
}
@media (max-width: 1160px) {
  #joyconLinks {
    display: none;
    margin-left: -400px;
    margin-top: 0px;
  }
}

#joyconRechts {
  margin-left: -300px;
}
@media (max-width: 1160px) {
  #joyconRechts {
    display: none;
    margin-left: -60px;
    margin-top: -200px;
  }
}

#heineken {
  width: 120px;
  margin-left: 340px;
}
@media (max-width: 1920px) {
  #heineken {
    right: 100px;
    margin-left: 0px;
  }
}
@media (max-width: 1160px) {
  #heineken {
    right: 0;
  }
}

#gustavo {
  width: 200px;
  margin-left: 400px;
}
@media (max-width: 1920px) {
  #gustavo {
    right: 100px;
    margin-left: 0px;
  }
}
@media (max-width: 1160px) {
  #gustavo {
    margin-left: 0px;
    margin-top: -100px;
    right: 0;
  }
}

.blur {
  filter: blur(1px);
}

.videoCombo {
  width: 100%;
  display: flex;
}
@media (max-width: 1160px) {
  .videoCombo {
    width: 90%;
    margin: auto;
  }
}

#CrewOverlay {
  pointer-events: none;
  transition: all 0.2s;
  opacity: 0;
  margin-top: -100%;
  width: 170%;
  transform: translate(-25.5%, -1%);
  filter: drop-shadow(4px 5px 6px rgba(0, 0, 0, 0.9));
}

#ditachedCrew {
  border-radius: 18px;
  width: 100%;
  height: 100%;
  min-width: 350px;
  background-size: cover;
  background-position: center center;
  background-image: url("../Assets/DitachedCrewNormal.jpg"); /* fallback for non image-set browser */
}

.aboutVideoRight {
  transform: translate(-16px, 33%);
  height: 100%;
  width: 66%;
  border-radius: 18px;
  z-index: -1;
  margin-left: -80px;
  margin-top: 70%;
}

.aboutVideoLeft {
  height: 100%;
  width: 60%;
  filter: drop-shadow(10px 0px 10px rgba(21, 33, 40, 0.5));
  border-radius: 18px;
}

.aboutImage {
  border-radius: 18px;
  width: 100%;
  object-fit: contain;
  pointer-events: all;
  overflow-x: hidden;
}

/* Button Styles */
button {
  border-style: hidden;
  cursor: pointer;
}

.btnSmall {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  border-radius: 8px;
  padding: 18px 30px;
  background: black;
  color: white;
  text-align: left;
  display: inline-flex;
  margin-right: 40px;
  transition-timing-function: ease-out;
  transition: 0.5s;
}

.shuffle::before {
  display: block;
  content: " ";
  background-image: url("../Assets/shuffleIcon.svg");
  background-size: 20px 20px;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  padding-right: 15px;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
.shuffle:hover::before {
  background-image: url("../Assets/shuffleIconWhite.svg");
}

.btnLarge {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  text-align: center;
  width: 100%;
  color: white;
  padding: 35px 0px;
  border-radius: 10px;
  transition-timing-function: ease-out;
  transition: 0.5s;
  cursor: pointer !important;
}
.btnLarge:hover {
  width: calc(100% + var(--border-width) * 10);
  height: calc(100% + var(--border-width) * 10);
  transform: rotateY(25deg) scale(1.1, 1);
}

.replytimestatus {
  background: radial-gradient(circle, #52b842 24%, #56e845 66%, #18ff00 92%);
  width: 7.5pt;
  height: 7.5pt;
  border-radius: 50%;
  margin-right: 5pt;
  margin-top: 7.5pt;
  box-shadow: 0px 0px 5px 5px rgba(82, 184, 66, 0.368627451);
}

.blink {
  animation: blink-animation 2s steps(5, start) infinite;
  -webkit-animation: blink-animation 2s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.contactMail {
  text-align: left;
  cursor: copy !important;
}
.contactMail span {
  margin-left: 60px;
}
@media (max-width: 1160px) {
  .contactMail span {
    margin-left: 30px;
  }
}
.contactMail::before {
  display: block;
  content: " ";
  background-image: url("../Assets/copyIcon.svg");
  background-size: 30px 30px;
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  position: absolute;
  right: 40px;
}
@media (max-width: 1160px) {
  .contactMail::before {
    right: 30px;
  }
}
@media (max-width: 800px) {
  .contactMail::before {
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    right: 30px;
  }
}

a {
  position: relative;
  padding: 4px 0;
  font-size: 16px;
  line-height: 30px;
  color: white;
  text-decoration: none;
  transition: 0.5s;
  opacity: 0.7;
  cursor: pointer !important;
}
a::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s;
  background: linear-gradient(60deg, #1a46ed, #ff1300);
}
a:hover {
  opacity: 1;
  cursor: default;
}
a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

a.underlined {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 30px;
  text-decoration: none;
  color: white;
  background-color: transparent;
  position: relative;
  height: 3.125rem;
  transition: 0.5s;
  opacity: 1;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}
a.underlined::after, a.underlined::before {
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.125rem;
  content: "";
  border-radius: 0.0625rem;
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  background: linear-gradient(60deg, #1a46ed, #ff1300);
}
a.underlined::before {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
a.underlined::after {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate3d(calc(-100% - 1.25rem), 0, 0);
  transform: translate3d(calc(-100% - 1.25rem), 0, 0);
  margin-top: -2px;
}
a.underlined:hover::before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate3d(calc(100% + 1.25rem), 0, 0);
  transform: translate3d(calc(100% + 1.25rem), 0, 0);
}
a.underlined:hover::after {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Grid Layout */
.grid12 {
  display: grid;
  width: 100%;
  max-width: 1160px;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0px 16px;
  gap: 0px 16px;
  align-items: center;
}
@media (max-width: 800px) {
  .grid12 {
    gap: 0px 5px;
  }
}

.grid14 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0px 16px;
  gap: 0px 16px;
  align-items: center;
}
@media (max-width: 800px) {
  .grid14 {
    grid-gap: 0px 5px;
    gap: 0px 5px;
  }
}

/* Grid Layout Klassen für Desktop */
.col1-span1 {
  grid-column: 1/span 1;
}

.col1-span2 {
  grid-column: 1/span 2;
}

.col1-span3 {
  grid-column: 1/span 3;
}

.col1-span4 {
  grid-column: 1/span 4;
}

.col1-span5 {
  grid-column: 1/span 5;
}

.col1-span6 {
  grid-column: 1/span 6;
}

.col1-span7 {
  grid-column: 1/span 7;
}

.col1-span8 {
  grid-column: 1/span 8;
}

.col1-span9 {
  grid-column: 1/span 9;
}

.col1-span10 {
  grid-column: 1/span 10;
}

.col1-span11 {
  grid-column: 1/span 11;
}

.col1-span12 {
  grid-column: 1/span 12;
}

.col2-span1 {
  grid-column: 2/span 1;
}

.col2-span2 {
  grid-column: 2/span 2;
}

.col2-span3 {
  grid-column: 2/span 3;
}

.col2-span4 {
  grid-column: 2/span 4;
}

.col2-span5 {
  grid-column: 2/span 5;
}

.col2-span6 {
  grid-column: 2/span 6;
}

.col2-span7 {
  grid-column: 2/span 7;
}

.col2-span8 {
  grid-column: 2/span 8;
}

.col2-span9 {
  grid-column: 2/span 9;
}

.col2-span10 {
  grid-column: 2/span 10;
}

.col2-span11 {
  grid-column: 2/span 11;
}

.col2-span12 {
  grid-column: 2/span 12;
}

.col3-span1 {
  grid-column: 3/span 1;
}

.col3-span2 {
  grid-column: 3/span 2;
}

.col3-span3 {
  grid-column: 3/span 3;
}

.col3-span4 {
  grid-column: 3/span 4;
}

.col3-span5 {
  grid-column: 3/span 5;
}

.col3-span6 {
  grid-column: 3/span 6;
}

.col3-span7 {
  grid-column: 3/span 7;
}

.col3-span8 {
  grid-column: 3/span 8;
}

.col3-span9 {
  grid-column: 3/span 9;
}

.col3-span10 {
  grid-column: 3/span 10;
}

.col3-span11 {
  grid-column: 3/span 11;
}

.col3-span12 {
  grid-column: 3/span 12;
}

.col4-span1 {
  grid-column: 4/span 1;
}

.col4-span2 {
  grid-column: 4/span 2;
}

.col4-span3 {
  grid-column: 4/span 3;
}

.col4-span4 {
  grid-column: 4/span 4;
}

.col4-span5 {
  grid-column: 4/span 5;
}

.col4-span6 {
  grid-column: 4/span 6;
}

.col4-span7 {
  grid-column: 4/span 7;
}

.col4-span8 {
  grid-column: 4/span 8;
}

.col4-span9 {
  grid-column: 4/span 9;
}

.col4-span10 {
  grid-column: 4/span 10;
}

.col4-span11 {
  grid-column: 4/span 11;
}

.col4-span12 {
  grid-column: 4/span 12;
}

.col5-span1 {
  grid-column: 5/span 1;
}

.col5-span2 {
  grid-column: 5/span 2;
}

.col5-span3 {
  grid-column: 5/span 3;
}

.col5-span4 {
  grid-column: 5/span 4;
}

.col5-span5 {
  grid-column: 5/span 5;
}

.col5-span6 {
  grid-column: 5/span 6;
}

.col5-span7 {
  grid-column: 5/span 7;
}

.col5-span8 {
  grid-column: 5/span 8;
}

.col5-span9 {
  grid-column: 5/span 9;
}

.col5-span10 {
  grid-column: 5/span 10;
}

.col5-span11 {
  grid-column: 5/span 11;
}

.col5-span12 {
  grid-column: 5/span 12;
}

.col6-span1 {
  grid-column: 6/span 1;
}

.col6-span2 {
  grid-column: 6/span 2;
}

.col6-span3 {
  grid-column: 6/span 3;
}

.col6-span4 {
  grid-column: 6/span 4;
}

.col6-span5 {
  grid-column: 6/span 5;
}

.col6-span6 {
  grid-column: 6/span 6;
}

.col6-span7 {
  grid-column: 6/span 7;
}

.col6-span8 {
  grid-column: 6/span 8;
}

.col6-span9 {
  grid-column: 6/span 9;
}

.col6-span10 {
  grid-column: 6/span 10;
}

.col6-span11 {
  grid-column: 6/span 11;
}

.col6-span12 {
  grid-column: 6/span 12;
}

.col7-span1 {
  grid-column: 7/span 1;
}

.col7-span2 {
  grid-column: 7/span 2;
}

.col7-span3 {
  grid-column: 7/span 3;
}

.col7-span4 {
  grid-column: 7/span 4;
}

.col7-span5 {
  grid-column: 7/span 5;
}

.col7-span6 {
  grid-column: 7/span 6;
}

.col7-span7 {
  grid-column: 7/span 7;
}

.col7-span8 {
  grid-column: 7/span 8;
}

.col7-span9 {
  grid-column: 7/span 9;
}

.col7-span10 {
  grid-column: 7/span 10;
}

.col7-span11 {
  grid-column: 7/span 11;
}

.col7-span12 {
  grid-column: 7/span 12;
}

.col8-span1 {
  grid-column: 8/span 1;
}

.col8-span2 {
  grid-column: 8/span 2;
}

.col8-span3 {
  grid-column: 8/span 3;
}

.col8-span4 {
  grid-column: 8/span 4;
}

.col8-span5 {
  grid-column: 8/span 5;
}

.col8-span6 {
  grid-column: 8/span 6;
}

.col8-span7 {
  grid-column: 8/span 7;
}

.col8-span8 {
  grid-column: 8/span 8;
}

.col8-span9 {
  grid-column: 8/span 9;
}

.col8-span10 {
  grid-column: 8/span 10;
}

.col8-span11 {
  grid-column: 8/span 11;
}

.col8-span12 {
  grid-column: 8/span 12;
}

.col9-span1 {
  grid-column: 9/span 1;
}

.col9-span2 {
  grid-column: 9/span 2;
}

.col9-span3 {
  grid-column: 9/span 3;
}

.col9-span4 {
  grid-column: 9/span 4;
}

.col9-span5 {
  grid-column: 9/span 5;
}

.col9-span6 {
  grid-column: 9/span 6;
}

.col9-span7 {
  grid-column: 9/span 7;
}

.col9-span8 {
  grid-column: 9/span 8;
}

.col9-span9 {
  grid-column: 9/span 9;
}

.col9-span10 {
  grid-column: 9/span 10;
}

.col9-span11 {
  grid-column: 9/span 11;
}

.col9-span12 {
  grid-column: 9/span 12;
}

.col10-span1 {
  grid-column: 10/span 1;
}

.col10-span2 {
  grid-column: 10/span 2;
}

.col10-span3 {
  grid-column: 10/span 3;
}

.col10-span4 {
  grid-column: 10/span 4;
}

.col10-span5 {
  grid-column: 10/span 5;
}

.col10-span6 {
  grid-column: 10/span 6;
}

.col10-span7 {
  grid-column: 10/span 7;
}

.col10-span8 {
  grid-column: 10/span 8;
}

.col10-span9 {
  grid-column: 10/span 9;
}

.col10-span10 {
  grid-column: 10/span 10;
}

.col10-span11 {
  grid-column: 10/span 11;
}

.col10-span12 {
  grid-column: 10/span 12;
}

.col11-span1 {
  grid-column: 11/span 1;
}

.col11-span2 {
  grid-column: 11/span 2;
}

.col11-span3 {
  grid-column: 11/span 3;
}

.col11-span4 {
  grid-column: 11/span 4;
}

.col11-span5 {
  grid-column: 11/span 5;
}

.col11-span6 {
  grid-column: 11/span 6;
}

.col11-span7 {
  grid-column: 11/span 7;
}

.col11-span8 {
  grid-column: 11/span 8;
}

.col11-span9 {
  grid-column: 11/span 9;
}

.col11-span10 {
  grid-column: 11/span 10;
}

.col11-span11 {
  grid-column: 11/span 11;
}

.col11-span12 {
  grid-column: 11/span 12;
}

.col12-span1 {
  grid-column: 12/span 1;
}

.col12-span2 {
  grid-column: 12/span 2;
}

.col12-span3 {
  grid-column: 12/span 3;
}

.col12-span4 {
  grid-column: 12/span 4;
}

.col12-span5 {
  grid-column: 12/span 5;
}

.col12-span6 {
  grid-column: 12/span 6;
}

.col12-span7 {
  grid-column: 12/span 7;
}

.col12-span8 {
  grid-column: 12/span 8;
}

.col12-span9 {
  grid-column: 12/span 9;
}

.col12-span10 {
  grid-column: 12/span 10;
}

.col12-span11 {
  grid-column: 12/span 11;
}

.col12-span12 {
  grid-column: 12/span 12;
}

.container-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.gridOverlay {
  position: fixed;
  top: 0;
  z-index: 100;
  pointer-events: none;
  display: none;
}
.gridOverlay .show {
  border: 1px solid rgba(255, 255, 255, 0.1019607843);
  height: 1000vh;
  color: rgba(255, 255, 255, 0.25);
}

/* Navigation */
.nav-gradient {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 0;
  z-index: 10;
}
.nav-gradient .gradient-black {
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2509803922) 100%);
}

.navBar {
  z-index: 10000000;
  position: fixed;
  width: 100%;
  max-width: 1160px;
  top: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: white;
}
@media (max-width: 800px) {
  .navBar {
    top: 20px;
  }
}
.navBar .ditachedLogo {
  display: flex;
  align-items: center;
}
.navBar .ditachedLogo #dLogo {
  background-image: url("../Assets/LogoSVG.svg");
  background-repeat: no-repeat;
  height: 36px;
  width: 50px;
  background-size: 100%;
  background-position: center center;
  margin-right: 10px;
}
.navBar .ditachedLogo a {
  font-size: 25px;
  opacity: 1;
}
.navBar #getInTouch {
  z-index: 1000;
}
@media (max-width: 800px) {
  .navBar #getInTouch {
    transform: translateX(-4vw);
  }
}
.navBar a.underlined {
  margin-top: 0;
  padding-top: 0;
  height: 2rem;
  margin-left: auto;
  margin-right: 30px;
}
@media (max-width: 800px) {
  .navBar a.underlined {
    margin: 0 auto;
  }
}
.navBar .menu {
  display: flex;
  align-items: flex-start;
}
.navBar .menu ul {
  display: flex;
  flex-flow: column wrap;
  margin: 0;
  list-style-type: none;
  font-size: 16px;
  line-height: 30px;
  opacity: 0.8;
  flex-direction: column;
  align-items: start;
  padding-inline-start: 0px;
}

.lang-select-li {
  padding-top: 23px !important;
}
@media (max-width: 800px) {
  .lang-select-li {
    padding-top: 52px !important;
  }
}

#lang-select {
  padding-left: 21px;
  position: relative;
  cursor: pointer !important;
}

#lang-select:before {
  content: " ";
  width: 20px;
  height: 20px;
  background-image: url("../Assets/icon-language.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  display: block;
  position: absolute;
  top: 6px;
  margin-left: -3px;
}
@media (max-width: 800px) {
  #lang-select:before {
    width: 30px;
    height: 30px;
    display: inline;
    top: 7px;
    margin-left: -39px;
  }
}

#menuToggle {
  display: block;
  position: relative;
  top: 60px;
  right: 60px;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@media (max-width: 800px) {
  #menuToggle {
    top: 10px;
    right: 30px;
  }
}

#menuToggle input {
  display: block;
  width: 80px;
  height: 60px;
  position: absolute;
  top: -16px;
  left: -24px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 3000000; /* and place it over the hamburger */
  -webkit-touch-callout: none; /* Safari Touch */
  -webkit-user-select: none; /* Webkit */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Edge*/
  user-select: none; /* Future-proof*/
}
@media (max-width: 800px) {
  #menuToggle input {
    z-index: 30000016; /* and place it over the hamburger */
  }
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 2px;
  margin-bottom: 6px;
  top: -2px;
  position: relative;
  background: white;
  border-radius: 3px;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 800px) {
  #menuToggle span {
    z-index: 3000006; /* and place it over the hamburger */
  }
}
#menuToggle span {
  -webkit-transform-origin: 4px 0px;
  transform-origin: 4px 0px;
  -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#menuToggle span:first-child {
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

#menuToggle span:nth-child(2) {
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

/* Transform all the slices of hamburger into a crossmark. */
#menuToggle input:checked ~ span {
  opacity: 0;
}
@media (max-width: 800px) {
  #menuToggle input:checked ~ span {
    opacity: 1;
  }
}
#menuToggle input:checked ~ span {
  -webkit-transform: rotate(-45deg) translate(-2px, -1px);
  transform: rotate(-45deg) translate(-2px, -1px);
  background: white;
}

/* But let's hide the middle one.*/
#menuToggle input:checked ~ span:nth-child(3) {
  opacity: 0;
  -webkit-transform: rotate(45deg) scale(0.2, 0.2);
  transform: rotate(45deg) scale(0.2, 0.2);
}

/* And the last one should go the other direction */
#menuToggle input:checked ~ span:nth-child(2) {
  opacity: 0;
}
@media (max-width: 800px) {
  #menuToggle input:checked ~ span:nth-child(2) {
    opacity: 1;
  }
}
#menuToggle input:checked ~ span:nth-child(2) {
  -webkit-transform: rotate(45deg) translate(0px, -1px);
  transform: rotate(45deg) translate(0px, -1px);
}

#menu {
  opacity: 0;
  position: absolute;
  width: 114px;
  margin: -118px 0 0 -118px;
  padding: 95px 40px 30px 40px;
  background: rgba(53, 43, 63, 0.431372549);
  list-style-type: none;
  border-radius: 18px;
  backdrop-filter: blur(10px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 3000001;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
@media (max-width: 800px) {
  #menu {
    position: fixed;
    width: 100%;
    margin: -190px 0px 0px 0px;
    padding: 240px 0px 50px 0px;
    text-align: center;
    left: 0;
    right: 0;
  }
}

#menu li {
  padding: 5px 0;
}
@media (max-width: 800px) {
  #menu li a {
    font-size: 25px;
    line-height: 50px;
  }
}

#menuToggle input:checked ~ ul {
  pointer-events: all;
}

#menuToggle input:checked ~ ul {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  opacity: 1;
}

.logoParade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 100%;
  position: absolute;
  bottom: 17vh;
  z-index: 1;
}
@media (max-width: 800px) {
  .logoParade {
    bottom: 13vh;
  }
}
.logoParade .logoheader {
  width: 100%;
  text-align: center;
  opacity: 0.5;
  margin-bottom: -25px;
}
.logoParade .logo {
  height: 80px;
}
@media (max-width: 800px) {
  .logoParade .logo {
    transform: scale(0.8);
  }
}
.logoParade .logo {
  /*&.gustavoLogo {
    @include for_breakpoint(ultrasmall) {
      display: none;
    } 
  }*/
}
.logoParade .pyramid {
  transform: scale(0.7);
}
.logoParade .justwriting {
  width: 80px;
  height: auto;
  opacity: 0.75;
}
.logoParade .textOnly {
  text-align: center;
  font-size: 10px;
  line-height: 12px;
}
.logoParade .textOnly span {
  font-size: 16px;
  font-weight: 800;
  font-family: aktiv-grotesk-extended, sans-serif;
  text-transform: uppercase;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-2400px);
  }
  @media (max-width: 800px) {
    100% {
      transform: translateX(-1500px);
    }
  }
}
.slider {
  background: transparent;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 60%;
}
@media (max-width: 800px) {
  .slider {
    width: 80%;
  }
}
.slider {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.slider::before, .slider::after {
  content: "";
  height: fit-content;
  position: absolute;
  width: fit-content;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 100s linear infinite;
  display: flex;
  width: 4800px;
}
@media (max-width: 800px) {
  .slider .slide-track {
    width: 3000px;
  }
}
.slider .slide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 200px;
}
@media (max-width: 800px) {
  .slider .slide {
    width: 125px;
  }
}

.playgroundArrows {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  pointer-events: none;
}
.playgroundArrows .arrowPlay {
  pointer-events: all;
  z-index: 100;
  cursor: pointer;
  position: fixed;
  background-image: url("../Assets/arrow.png");
  background-size: cover;
  bottom: 50%;
  right: 4%;
  width: 50px;
  height: 50px;
  filter: drop-shadow(0px 0px 10px rgb(0, 0, 0));
}
@media (max-width: 800px) {
  .playgroundArrows .arrowPlay {
    bottom: 44px;
    width: 30px;
    height: 30px;
  }
}
.playgroundArrows .arrowPlay:hover {
  filter: drop-shadow(0px 0px 10px rgb(231, 231, 231));
}
.playgroundArrows .left {
  left: 4%;
  transform: rotate(180deg);
}

/* Section Header */
/*.headerScene {
   background: red !important;
 }*/
header .scrollcontainer {
  width: 100%;
  max-width: 1160px;
  z-index: 2;
  pointer-events: none;
}
header .scrollcontainer .scroll {
  font-size: 16px;
  transform: rotate(270deg);
  position: absolute;
  bottom: 100px;
}
header .scroll::before {
  content: "";
  width: 140px;
  height: 2px;
  background: linear-gradient(285deg, #eee, #a69aed);
  position: absolute;
  left: -160px;
  top: 55%;
  z-index: 1;
  transform: sc;
}

.headerScene {
  height: 100vh;
  width: 100%;
  /*background-color: #420d58;*/
  top: 0;
  display: flex;
  justify-content: center;
}
.headerScene h1 {
  display: none;
}
.headerScene .whiteHeadline {
  color: #dadada;
  font-size: 42pt;
  position: absolute;
  bottom: 160px;
  margin: 12px 0px 0px 0px;
  margin-bottom: 15px;
  padding-bottom: 20px;
}
@media (max-width: 800px) {
  .headerScene .whiteHeadline {
    font-size: 20pt;
    margin-top: -25px;
  }
}
.headerScene #container {
  position: absolute;
  top: 0;
  min-width: 100%;
  max-width: 2000px;
  width: 100%;
  min-height: 100%;
  height: 100vh;
  z-index: 1;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
@media (max-width: 1160px) {
  .headerScene #container {
    display: none;
  }
}
.headerScene #headervideo {
  mask-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 3%, black 75%);
  position: absolute;
  top: 0vh;
  width: 100%;
  height: 100vh;
  z-index: 1;
  object-fit: contain;
  overflow: hidden;
  margin: auto;
}
.headerScene #headervideo video {
  object-fit: cover;
  width: 100vw;
}
@media (max-width: 1400px) {
  .headerScene #headervideo {
    width: 100%;
    height: 100vh;
  }
}
@media (max-width: 1160px) {
  .headerScene #headervideo {
    display: block;
  }
}
@media (max-width: 800px) {
  .headerScene #headervideo {
    display: block;
    height: 80vh;
  }
}
.headerScene #video-background {
  position: absolute;
  top: 0;
  min-width: 100%;
  max-width: 2000px;
  width: 100%;
  min-height: 100%;
  height: 100vh;
  z-index: -100;
  object-fit: cover;
}
.headerScene .gradient-text {
  z-index: 100;
  position: absolute;
  bottom: 160px;
  margin: 12px 0px 0px 0px;
  padding-bottom: 40px;
  opacity: 0.6 !important;
}
@media (max-width: 320px) {
  .headerScene .gradient-text {
    display: none;
  }
}
@media (max-width: 800px) {
  .headerScene .gradient-text {
    bottom: 120px;
  }
}
.headerScene .gradient-text-header {
  z-index: 100;
  position: absolute;
  bottom: 160px;
  margin: 12px 0px 0px 0px;
  padding-bottom: 40px;
  opacity: 0.85 !important;
}
@media (max-width: 320px) {
  .headerScene .gradient-text-header {
    display: none;
  }
}
@media (max-width: 800px) {
  .headerScene .gradient-text-header {
    bottom: 120px;
  }
}
.headerScene .gradient-black {
  position: absolute;
  bottom: -200px;
  width: 100%;
  height: 400px;
  z-index: 1;
}
.headerScene .blurred-item {
  position: absolute;
  pointer-events: none;
}
@media (max-width: 1160px) {
  .headerScene .blurred-item {
    display: none;
  }
}
.headerScene .item1 {
  width: 105px;
  height: auto;
  z-index: 10;
  left: 340px;
  top: 505px;
  animation: wobble 20s ease 0s infinite normal forwards;
}
@media (max-width: 1400px) {
  .headerScene .item1 {
    left: 340px;
  }
}
@media (max-width: 1160px) {
  .headerScene .item1 {
    display: none;
  }
}
.headerScene .item2 {
  width: 115px;
  height: auto;
  z-index: 9;
  left: 171px;
  top: 236px;
  animation: wobble 17s ease 0s infinite normal backwards;
}
.headerScene .item3 {
  width: 156px;
  height: auto;
  z-index: 9;
  right: 450px;
  top: 515px;
  animation: wobble 17s ease 0s infinite normal backwards;
}
.headerScene .item4 {
  width: 76px;
  height: auto;
  z-index: 9;
  right: 225px;
  top: 207px;
  animation: wobble 17s ease 0s infinite normal backwards;
}
@keyframes wobble {
  0% {
    transform: translate(0);
  }
  30% {
    transform: translate(-5px, -25px);
  }
  60% {
    transform: translate(5px, 25px);
  }
  100% {
    transform: translate(0);
  }
}

#loadercontainer {
  pointer-events: none;
  position: absolute;
  opacity: 1;
  width: 100%;
  height: 100%;
  z-index: 10000000000;
  transition: opacity 0.4s ease-in;
}
@media (max-width: 800px) {
  #loadercontainer {
    display: none;
  }
}
@media (max-width: 1160px) {
  #loadercontainer {
    display: none;
  }
}
#loadercontainer lottie-player {
  margin: auto;
  margin-top: 15%;
  width: 300px;
  height: 300px;
}
#loadercontainer h4,
#loadercontainer h3 {
  text-align: center;
  width: 100%;
  margin-top: -15px;
}
#loadercontainer h4 {
  font-size: 16px;
}

/* Section Extrameile */
#extrameileContainer {
  display: flex;
  overflow: hidden;
  width: 100vw;
}
@media (max-width: 800px) {
  #extrameileContainer {
    width: 300vw;
    display: none;
  }
}
@media (max-width: 1160px) {
  #extrameileContainer {
    display: none;
  }
}

.extrameile {
  overflow: hidden;
  width: 97vw;
  padding: 150px 0 50px 0;
}
@media (max-width: 800px) {
  .extrameile {
    padding: 40px 0px 50px 0px;
    overflow: hidden;
    margin-left: 0;
  }
}
.extrameile {
  mix-blend-mode: lighten;
}
.extrameile h2 {
  mix-blend-mode: lighten;
}
.extrameile #extrameile {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 160px;
  background: -webkit-linear-gradient(75deg, #1a46ed, #ff1300);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: black;
  position: absolute;
  padding: 60px 0px;
  position: sticky;
  transform: scale(1);
}
@media (max-width: 800px) {
  .extrameile #extrameile {
    font-size: 150px;
  }
}
.extrameile #extrameile {
  /*
  background-size: 300% 300%;
  background-position: 0 50%;
  animation: moveGradient 4s alternate infinite;
  */
}
.extrameile #extrameilemobile {
  display: none;
  width: 100%;
  text-align: center;
}
@media (max-width: 800px) {
  .extrameile #extrameilemobile {
    display: block;
  }
}
@media (max-width: 1160px) {
  .extrameile #extrameilemobile {
    display: block;
  }
}
.extrameile h4 {
  padding-bottom: 40px;
}
@media (max-width: 800px) {
  .extrameile h4 {
    padding-bottom: 10px;
  }
}
.extrameile p {
  margin-top: 0;
}
.extrameile img {
  grid-column: 1/span 12;
  transform: translateX(26%);
}
.extrameile .contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  mix-blend-mode: lighten;
}
.extrameile .contact p::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  margin-right: 10px;
  background: radial-gradient(circle, #52b842 24%, #56e845 66%, #18ff00 92%);
}
.extrameile .papierflieger {
  grid-column: 1/span 12;
  height: 250px;
  background-image: url(../Assets/3DFlieger.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto;
  margin-top: 70px;
  width: 40%;
  animation: wobble 4s ease-in-out infinite;
}
@media (max-width: 800px) {
  .extrameile .papierflieger {
    width: 100vw;
    margin: auto;
    pointer-events: none;
    display: none;
  }
}

/* Section Services */
.services {
  flex-wrap: wrap;
}
.services .grid12 {
  align-items: baseline;
}
@media (max-width: 800px) {
  .services h2 {
    width: 80vw;
  }
}
@media (max-width: 800px) {
  .services div {
    width: 80vw;
  }
}
.services ol {
  padding: 0px 16px 0px 0px;
  counter-reset: items;
  height: 500px;
}
@media (max-width: 1160px) {
  .services ol {
    height: 600px;
  }
}
@media (max-width: 800px) {
  .services ol {
    height: 370px;
  }
}
.services li {
  display: block;
  counter-increment: items;
}
.services li:before {
  content: "0" counter(items) " ";
  position: absolute;
  font-family: novel-sans-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 20px;
  line-height: 36px;
  color: white;
  opacity: 0.4;
  margin-left: -40px;
}
.services li:nth-child(n+10):before {
  content: "" counter(items) " ";
}
.services .gradient-purple {
  position: relative;
  bottom: 380px;
  width: 100%;
  height: 370px;
  z-index: 1;
  mix-blend-mode: darken;
}
.services .arrowContainer {
  pointer-events: none;
  transform: translateZ(100px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  position: relative;
  z-index: -1;
}
.services .arrowContainer .arrowContent {
  display: flex;
  justify-content: center;
  transform-style: preserve-3d;
}
.services .arrowContainer .arrowContent span {
  position: absolute;
  margin: 62px -60px 0 0;
  width: 200px;
  z-index: 1;
  font-size: 20px;
  transform: translateZ(100px);
}
.services .arrowContainer .arrowContent .arrow {
  position: absolute;
  margin: 75px 3px;
  transform: translateZ(50px);
  animation: pointDown 4s cubic-bezier(1, -1.42, 0.86, 1.11) infinite;
}
@keyframes pointDown {
  0% {
    margin: 70px 3px 0px 3px;
  }
  20% {
    margin: 85px 3px 0px 3px;
  }
  50% {
    margin: 70px 3px 0px 3px;
  }
  100% {
    margin: 70px 3px 0px 3px;
  }
}
.services .arrowContainer .arrowContent .arrowBg {
  transform: translateZ(10px);
  height: 466px;
  margin-top: -80px;
  padding-bottom: 80px;
}

#video-angebot {
  max-width: 1920px;
  width: calc(100% - 32px) !important;
  min-height: 550px;
  height: 50vh;
  padding: 16px;
  border-radius: 30px;
  object-fit: cover;
}
@media (max-width: 800px) {
  #video-angebot {
    height: 550px;
    padding: 0px;
    border-radius: 16px;
  }
}

.video-mavesque-behindthescenes {
  min-height: 750px;
  height: 50vh;
  margin: auto;
}

.playgroundCard {
  display: none;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.playgroundCard.is-relevant {
  display: flex;
}
.playgroundCard h3 {
  font-size: 14pt;
  text-align: center;
}
.playgroundCard video {
  transition: all 0.7s;
  transform: scale(1);
}
.playgroundCard:hover {
  transition: all 0.2s;
}
.playgroundCard:hover video {
  transform: scale(1.2);
}
.playgroundCard:hover .overlay {
  backdrop-filter: blur(10px);
  background: linear-gradient(60deg, rgba(26, 72, 237, 0.2666666667), rgba(255, 17, 0, 0.262745098));
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: var(--border-radius);
  animation: moveGradient 8s infinite;
  background: rgba(53, 43, 63, 0.431372549);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 30000000000000000000000000000000000;
}
.playgroundCard:hover .overlay h3 {
  transform: translate(0, 0%);
  opacity: 1;
}
.playgroundCard .overlay {
  border-radius: 18px;
  transition: all 0.2s ease-out;
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: 0;
  position: absolute;
  z-index: 30000000000000000000000000000000000;
}
.playgroundCard .overlay h3 {
  transition: all 0.4s ease-out;
  opacity: 0;
  transform: translate(0, 40%);
}

#modal {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: all 0.4s ease-in-out;
  pointer-events: none;
  overflow: hidden;
  z-index: 30000000000000000000000000000000000;
}
#modal.show {
  opacity: 1;
  backdrop-filter: blur(6px);
  pointer-events: all;
}
#modal.show .playgroundContent {
  pointer-events: all;
}
#modal.show .playgroundContent .video video {
  max-width: 100%;
  transform: translate(-50%, -70%) scale(1);
  pointer-events: all;
}
#modal.show .text {
  pointer-events: all;
}
#modal.show #backgroundClose {
  pointer-events: all;
  z-index: 0;
}
#modal .close {
  display: flex;
  place-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  position: absolute;
  right: 1vw;
  top: 1vh;
  font-size: 18pt;
  z-index: 30000000000000000000000000000000000;
  margin-top: 50px;
  margin-right: 20px;
}
@media (max-width: 800px) {
  #modal .close {
    margin-top: 20px;
  }
}
#modal .close :hover {
  opacity: 0.7;
}
#modal #playgroundInfo {
  display: flex;
  place-content: center;
  align-items: center;
  min-width: 40px;
  min-height: 40px;
  position: absolute;
  left: 1vw;
  top: 1vh;
  font-size: 18pt;
  z-index: 30000000000000000000000000000000000;
  margin-top: 20px;
  margin-left: 20px;
}
#modal #backgroundClose {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.playgroundContent {
  pointer-events: none;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 10px;
  grid-row-gap: 20px;
  grid-column-gap: 10px;
}
.playgroundContent .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 50px;
  grid-column-gap: 50px;
}
.playgroundContent .head .btnSmall {
  height: 20px;
  width: 90px;
}
.playgroundContent .video {
  align-self: center;
  min-width: 340px;
  max-width: 1200px;
  flex: 3;
  overflow: hidden;
  z-index: 100;
}
.playgroundContent .video video {
  border-radius: 30px;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transition: all 0.5s ease-out;
  transform: translate(-50%, -70%) scale(0);
  min-width: 50%;
  min-height: 50%;
  max-width: 1500px;
  max-height: 800px;
  width: auto;
  height: auto;
}
.playgroundContent .text {
  border-radius: 18px;
  z-index: 101;
  padding: 6ch;
  min-width: 300px;
  max-width: 80ch;
  align-self: center;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  margin-bottom: 7vh;
  background-image: linear-gradient(60deg, rgba(26, 70, 237, 0.6784313725) -10%, rgba(250, 22, 15, 0.6588235294) 220%);
  background-blend-mode: darken;
}
@media (max-width: 800px) {
  .playgroundContent .text {
    padding: 3ch;
    padding-bottom: 14ch;
    margin-bottom: 0px;
  }
}

#video-angebot {
  max-width: 1920px;
  width: calc(100% - 32px) !important;
  min-height: 550px;
  height: 50vh;
  padding: 16px;
  border-radius: 30px;
  object-fit: cover;
}
@media (max-width: 800px) {
  #video-angebot {
    height: 550px;
    padding: 0px;
    border-radius: 16px;
  }
}

/* Section Projects */
.projects {
  padding-top: 200px;
}
.projects .grid12 {
  row-gap: 200px;
  grid-row-gap: 200px;
  grid-column-gap: 40px;
  column-gap: 40px;
  align-items: flex-end;
}
@media (max-width: 800px) {
  .projects .grid12 {
    grid-column-gap: 0px;
    column-gap: 0px;
  }
}

.projectheadercover {
  max-width: 1920px;
  border-radius: 18px;
  width: 100%;
  min-height: 50vh;
  height: 100vh;
  max-height: 1080px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  object-fit: contain;
  margin: auto;
  margin-top: -50px;
  width: 100%;
  height: 98vh;
}
@media (max-width: 800px) {
  .projectheadercover {
    width: 100% !important;
    height: 75vh !important;
    margin-top: -10px !important;
    max-height: 1080px !important;
  }
}
.projectheadercover#picover {
  background-image: url("../Assets/PI_Header_Site.jpg"); /* fallback for non image-set browser */
}
.projectheadercover#hondatouchtablecover {
  background-image: url("../Assets/Honda-Touchtable-Header.jpg"); /* fallback for non image-set browser */
}
.projectheadercover#veltinscover {
  background-image: url("../Assets/veltins-hero3.webp"); /* fallback for non image-set browser */
}
.projectheadercover#arpartycover {
  background-image: url("../Assets/arpartycover.jpg"); /* fallback for non image-set browser */
}
@media (max-width: 800px) {
  .projectheadercover#arpartycover {
    background-image: url("../Assets/AR Party mobile header.jpg");
  }
}
.projectheadercover#mavesquecover {
  background-image: url("../Assets/MavesqueGroupMeshUp.jpg"); /* fallback for non image-set browser */
}
.projectheadercover#playmobilprocover {
  background-image: url("../Assets/playmobilproheader-new.jpg"); /* fallback for non image-set browser */
}
.projectheadercover#lhcover {
  background-image: url("../Assets/lh-cover.webp"); /* fallback for non image-set browser */
  background-position: right;
}
.projectheadercover#mbclacover {
  background-image: url("../Assets/Mercedes/CLA/Welpremiere Rom Header.webp");
}
.projectheadercover#amggtxxcover {
  background-image: url("../Assets/Amg/5_Virtual Drive.webp");
}
.projectheadercover#snipescover {
  background-image: url("../Assets/Snipes/Snipes-Hero.webp");
}

/*
.no-webp &#picover{
  background-image: url("Assets/PI_Header_Site.jpg");
}
.webp &#picover{
  background-image: url("Assets/PI_Header_Site.webp");
}
*/
@keyframes scale-in-Animation-Header {
  0% {
    width: 90%;
    height: 85vh;
    margin-top: 81px;
  }
  100% {
    width: 100%;
    height: 100vh;
    margin-top: -60px;
    border-radius: 0 0 18px 18px;
  }
}
.projectheaderbox {
  background: linear-gradient(165deg, rgba(10, 10, 12, 0.95) 0%, rgba(6, 4, 14, 0.98) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 45px 22px 45px;
  border-radius: 12px;
  height: auto;
  margin-top: -370px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.projectheaderbox h2 {
  padding-bottom: 10px;
}
.projectheaderbox .lh {
  font-size: 60px;
}
@media (max-width: 800px) {
  .projectheaderbox {
    padding: 10px 20px 20px 20px;
    margin-top: -70px;
  }
  .projectheaderbox h2 {
    font-size: 36px;
    line-height: 1;
    padding-top: 10px;
  }
  .projectheaderbox .lh {
    font-size: 36px;
    line-height: 1;
    padding-top: 10px;
  }
}
.projectheaderbox .description {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
  flex-wrap: wrap;
}
@media (max-width: 800px) {
  .projectheaderbox .description {
    margin-top: -20px;
  }
}
.projectheaderbox .description .bulletpoint {
  width: auto;
  padding-left: 25px;
  padding-right: 25px;
}
.projectheaderbox .description .bulletpoint:first-child {
  padding-left: 0px;
}
.projectheaderbox .description .bulletpoint:first-child, .projectheaderbox .description .bulletpoint:nth-child(2) {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.projectheaderbox .description .bulletpoint .bulletpointtop {
  font-family: novel-sans-pro, sans-serif;
  font-size: 20px;
  opacity: 0.5;
  margin-bottom: 5px;
}
.projectheaderbox .description .bulletpoint .bulletpointbottom {
  font-size: 22px;
  font-family: aktiv-grotesk-extended, sans-serif;
}
@media (max-width: 800px) {
  .projectheaderbox .description .bulletpoint {
    width: 100%;
    margin-top: 20px;
    padding-left: 0px;
    border: none !important;
  }
}

/* ── Hero crop lines (redesign v2) ── */
.projectheaderbox {
  overflow: visible;
}
.projectheaderbox .hero-crop {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}
.projectheaderbox .hero-crop-tl-v {
  left: -5px;
  top: -48px;
  width: 1px;
  height: calc(100% + 48px + 32px);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 48px, rgba(255, 255, 255, 0.4) 50%, transparent);
}
.projectheaderbox .hero-crop-tl-h {
  left: -48px;
  top: -5px;
  width: calc(50% + 48px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4) 48px, transparent);
}
.projectheaderbox .hero-crop-br-v {
  right: -5px;
  top: 50%;
  width: 1px;
  height: calc(50% + 48px);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 85%, transparent);
}
.projectheaderbox .hero-crop-br-h {
  left: 90%;
  bottom: -5px;
  width: calc(10% + 48px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4) 70%, transparent);
}

/* ── New Project Hero Styles (redesign v2) ── */
.projectheaderbox .hero-date {
  display: block;
  font-family: "Geist Mono", "SF Mono", monospace;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6d6470;
  margin-bottom: 8px;
}
.projectheaderbox .hero-title {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 40pt;
  line-height: 1.05;
  font-weight: 200;
  letter-spacing: -0.02em;
  padding-bottom: 0px;
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: none;
}
.projectheaderbox .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 20px;
}
.projectheaderbox .hero-meta-item {
  display: flex;
  flex-direction: column;
  padding: 0 25px;
}
.projectheaderbox .hero-meta-item:first-child {
  padding-left: 0;
  max-width: 50%;
}
.projectheaderbox .hero-meta-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.projectheaderbox .hero-meta-label {
  font-family: "Geist Mono", "SF Mono", monospace;
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #6d6470;
  margin-bottom: 4px;
}
.projectheaderbox .hero-meta-value {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  font-weight: 400;
  color: rgba(232, 232, 232, 0.8);
}
@media (max-width: 800px) {
  .projectheaderbox .hero-meta-item {
    width: 100%;
    padding-left: 0;
    margin-top: 16px;
    border: none !important;
  }
}

.funfacts {
  margin-top: var(--spacing);
}
@media (max-width: 800px) {
  .funfacts {
    margin-top: 130px;
  }
}
.funfacts .block1,
.funfacts .block3 {
  margin: auto;
  margin-bottom: 25px;
  margin-top: 50px;
  width: 80%;
  line-height: 1.4;
}
@media (max-width: 800px) {
  .funfacts .block1,
  .funfacts .block3 {
    margin: 0;
    width: 100%;
  }
}
@media (max-width: 1160px) {
  .funfacts .block1,
  .funfacts .block3 {
    margin: 0;
    width: 100%;
  }
}
.funfacts .block1 div,
.funfacts .block3 div {
  font-weight: 800;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 26px;
  /*letter-spacing: 3px;*/
}
.funfacts .block1 p,
.funfacts .block3 p {
  font-family: novel-sans-pro;
  font-size: 20px;
  opacity: 0.8;
  line-height: 32px;
}
.funfacts .block2 {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.funfacts .block2 div {
  padding-left: 10px;
}
@media (max-width: 800px) {
  .funfacts .block2 div {
    padding: 0px;
  }
}
.funfacts .block2 div.blockleft {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 26px;
  line-height: 38px;
  width: 50%;
  min-width: 400px;
  margin-right: 5%;
  margin-bottom: 25px;
  padding-top: 35px;
}
@media (max-width: 800px) {
  .funfacts .block2 div.blockleft {
    width: 100%;
    min-width: 100%;
  }
}
@media (max-width: 1160px) {
  .funfacts .block2 div.blockleft {
    width: 100%;
    min-width: 100%;
  }
}
.funfacts .block2 div.blockright {
  font-family: novel-sans-pro;
  font-size: 20px;
  line-height: 32px;
  font-weight: 100;
  opacity: 0.8;
  width: 40%;
  min-width: 400px;
}
@media (max-width: 800px) {
  .funfacts .block2 div.blockright {
    width: 100%;
    min-width: 100%;
  }
}
@media (max-width: 1160px) {
  .funfacts .block2 div.blockright {
    width: 100%;
    min-width: 100%;
  }
}

.large-p {
  font-family: novel-sans-pro;
  font-size: 20px;
  opacity: 0.8;
  line-height: 32px;
}

.trailervideo {
  margin-top: var(--spacing);
  width: 100%;
}
.trailervideo video {
  margin: auto;
  border-radius: 18px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
@media (max-width: 800px) {
  .trailervideo video {
    width: 110%;
    height: 550px;
    margin-left: -5%;
  }
}
@media (max-width: 800px) {
  .trailervideo .inline {
    width: 92%;
    height: 550px;
    margin-left: 4%;
  }
}

.videodescription {
  font-family: novel-sans-pro;
  font-size: 20px;
  opacity: 0.4;
  margin-top: 15px;
  line-height: 32px;
}

.quoteAuthor {
  font-family: novel-sans-pro;
  font-size: 20px;
  opacity: 0.4;
  margin-top: 15px;
  line-height: 32px;
  margin-left: -10px;
}
@media (max-width: 800px) {
  .quoteAuthor {
    margin-left: 0;
  }
}

.technicalinsight {
  margin: auto;
  margin-top: var(--spacing);
}
.technicalinsight h3 {
  margin-left: 50px;
}
.technicalinsight div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
}
.technicalinsight iframe {
  width: 50%;
  height: 275px;
  border-radius: 18px;
  margin-right: 25px;
}
@media (max-width: 1160px) {
  .technicalinsight iframe {
    width: 100%;
  }
}
.technicalinsight .insightimage {
  width: 40%;
  font-family: novel-sans-pro;
  font-size: 20px;
  opacity: 0.8;
  line-height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.technicalinsight .insightimage.cutoutfeature {
  background-image: url("../Assets/CutoutExample.png"); /* fallback for non image-set browser */
}
@media (max-width: 1160px) {
  .technicalinsight .insightimage {
    width: 100%;
    margin-top: 25px;
  }
}
.technicalinsight .insighttext {
  width: 40%;
  font-family: novel-sans-pro;
  font-size: 20px;
  line-height: 32px;
  opacity: 0.8;
}
@media (max-width: 1160px) {
  .technicalinsight .insighttext {
    width: 100%;
    margin-top: 25px;
  }
}
.technicalinsight .insighttext.cutoutfeature {
  width: 60%;
}
@media (max-width: 1160px) {
  .technicalinsight .insighttext.cutoutfeature {
    width: 100%;
    margin-top: -50px;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes leftRightSwipe {
  0% {
    transform: translateX(-50px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(-50px);
  }
}
#lottieContainerHedaer h4 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  top: 59%;
}
#lottieContainerHedaer #swipeIcon {
  position: absolute;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  filter: drop-shadow(2px 2px 5px black);
  top: 59%;
  z-index: 100;
  opacity: 0;
}

.appcover {
  margin-top: var(--spacing);
  width: 100%;
  max-width: 1920px;
  height: auto;
  padding: 50px 0px;
  border-radius: 18px;
  background-size: cover;
  background-position: center center;
}
.appcover#playmobilproapp {
  background-image: url("../Assets/playproappcover.png"); /* fallback for non image-set browser */
}
.appcover#mavesqueapp {
  background-image: url("../Assets/mavesque-weinkeller.jpg"); /* fallback for non image-set browser */
}
.appcover .frame {
  width: 75%;
  height: 60%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 15px 0px 100px;
}
.appcover .frame p {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 26px;
  min-width: 100%;
}
.appcover .frame .appstorebutton {
  width: 45%;
  height: 100px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  opacity: 1;
}
@media (max-width: 800px) {
  .appcover .frame .appstorebutton {
    width: 100%;
  }
}
.appcover .frame .appstorebutton:after {
  background: none;
}
.appcover .frame .appstorebutton:hover {
  width: 47%;
}
@media (max-width: 800px) {
  .appcover .frame .appstorebutton:hover {
    width: 100%;
  }
}
.appcover .frame .appstorebutton:hover#iOS {
  margin-left: -10px;
}
.appcover .frame .appstorebutton:hover#android {
  margin-right: -10px;
}
.appcover .frame .appstorebutton#iOS {
  background-image: url("../Assets/appstorebutton.png"); /* fallback for non image-set browser */
}
.appcover .frame .appstorebutton#android {
  background-image: url("../Assets/playstorebutton.png"); /* fallback for non image-set browser */
}
@media (max-width: 800px) {
  .appcover .frame .appstorebutton#android {
    margin-top: 15px;
  }
}

.spacer {
  width: 80vw;
  height: var(--spacing);
}

.allabout {
  margin: auto;
  margin-top: var(--spacing);
  width: 100%;
}
.allabout h3 {
  float: left;
  margin-left: 50px;
}
@media (max-width: 800px) {
  .allabout h3 {
    margin-left: 0px;
    padding-bottom: 25px;
  }
}

@media (max-width: 1160px) {
  .noMarginOnMedium {
    margin-top: 0 !important;
  }
}

.contentbox {
  margin-top: -100px;
  border-radius: 18px;
  background-color: black;
  padding: 25px 50px;
  transition-timing-function: ease-out;
  transition: 0.5s;
  position: relative;
}
@media (max-width: 800px) {
  .contentbox.mavesque {
    margin-top: 0px;
  }
}
@media (max-width: 800px) {
  .contentbox.noBoxOnMobile {
    padding: 0px;
    background-color: transparent;
  }
}
@media (max-width: 1160px) {
  .contentbox {
    margin: auto;
    margin-top: 100px;
  }
  .contentbox.noMarginOnMedium {
    margin-top: 0px;
  }
}
.contentbox.characterdesign {
  margin-top: 100px;
  background-color: transparent;
}
.contentbox .content {
  width: 75%;
  position: relative;
}
@media (max-width: 800px) {
  .contentbox .content {
    width: 100%;
  }
}
@media (max-width: 1160px) {
  .contentbox .content {
    width: 100%;
  }
}
.contentbox .content .headline {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 26px;
  line-height: 38px;
}
.contentbox .content .materials {
  position: absolute;
  margin-left: -400px;
  margin-top: 100px;
  width: 500px;
  height: 300px;
}
@media (max-width: 800px) {
  .contentbox .content .materials.floatingSpheres {
    margin-left: 0px;
  }
}
@media (max-width: 800px) {
  .contentbox .content .materials.workshopBox {
    width: 100%;
    height: 50vh;
    position: initial;
    margin-left: 0px;
  }
}
.contentbox .content .materials .material {
  background-size: contain;
  position: absolute;
  transition-timing-function: ease-out;
  transition: 0.5s;
  background-repeat: no-repeat;
}
.contentbox .content .materials .material:hover {
  transform: rotateY(50deg) scale(1.5, 1);
}
.contentbox .content .materials #playmokasten {
  background-image: url("../Assets/pro-set-product.png"); /* fallback for non image-set browser */
  width: 300px;
  height: 300px;
  margin-left: 0px;
  margin-top: -50px;
  opacity: 0.8;
}
@media (max-width: 800px) {
  .contentbox .content .materials #playmokasten {
    width: 80%;
    height: 50vh;
  }
}
.contentbox .content .materials #playmofigur {
  background-image: url("../Assets/playmocutout.png"); /* fallback for non image-set browser */
  width: 300px;
  height: 300px;
  margin-left: 125px;
  margin-top: 50px;
}
@media (max-width: 800px) {
  .contentbox .content .materials #playmofigur {
    width: 80%;
    height: 50vh;
    margin: 0;
  }
}
.contentbox .content .materials #kugelback {
  background-image: url("../Assets/ARKugelBack.png"); /* fallback for non image-set browser */
  width: 100px;
  height: 100px;
  margin-left: 250px;
  margin-top: 0px;
}
@media (max-width: 800px) {
  .contentbox .content .materials #kugelback {
    margin-left: 300px;
  }
}
.contentbox .content .materials #kugelmiddel {
  background-image: url("../Assets/ARKugelMitte_2.png"); /* fallback for non image-set browser */
  width: 200px;
  height: 200px;
  margin-left: 100px;
  margin-top: 0px;
}
@media (max-width: 800px) {
  .contentbox .content .materials #kugelmiddel {
    display: none;
  }
}
.contentbox .content .materials #kugelfront {
  background-image: url("../Assets/ARKugelFront_2.png"); /* fallback for non image-set browser */
  width: 300px;
  height: 300px;
  margin-left: -100px;
  margin-top: 0px;
}
@media (max-width: 800px) {
  .contentbox .content .materials #kugelfront {
    margin-left: -200px;
  }
}
.contentbox .cornerimage {
  position: absolute;
  width: 300px;
  height: 300px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin-top: -150px;
  margin-left: 650px;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 1400px) {
  .contentbox .cornerimage {
    margin-left: 600px;
    position: initial;
  }
}
@media (max-width: 1160px) {
  .contentbox .cornerimage {
    margin-left: 450px;
    position: initial;
  }
}
@media (max-width: 1160px) {
  .contentbox .cornerimage#arpartycharactervideo {
    display: none;
  }
}
.contentbox .cornerimage video {
  border-radius: 18px;
  margin-top: -250px;
  width: 100%;
  height: 100%;
}
@media (max-width: 800px) {
  .contentbox .cornerimage video {
    margin: 0px;
  }
}
.contentbox .cornerimage#proappphone {
  background-image: url("../Assets/iPhonePNG.png"); /* fallback for non image-set browser */
  transition-timing-function: ease-out;
  transition: 0.5s;
  background-size: cover;
  width: 200px;
  height: 400px;
  margin-top: -200px;
}
@media (max-width: 800px) {
  .contentbox .cornerimage#proappphone {
    width: 100%;
    height: 360px;
    background-size: contain;
    margin: 0px;
    display: none;
  }
}
@media (max-width: 1160px) {
  .contentbox .cornerimage#proappphone {
    position: absolute;
    width: 100%;
    background-size: contain;
    margin-top: -400px;
    margin-left: 350px;
  }
}
.contentbox .cornerimage#cutoutvideo {
  width: 190px;
  height: 360px;
  margin-top: 46px;
  margin-left: 656px;
}
@media (max-width: 800px) {
  .contentbox .cornerimage#cutoutvideo {
    height: 360px;
    margin-top: 50px;
    margin-left: 676px;
    width: 100%;
    height: 360px;
    margin: 0px;
    position: absolute;
    display: contents;
  }
}
@media (max-width: 1160px) {
  .contentbox .cornerimage#cutoutvideo {
    width: 100%;
    margin-top: -150px;
    position: absolute;
    margin-left: 350px;
  }
}
.contentbox .cornerimage#arpartycoins {
  background-image: url("../Assets/ARPartyCoins.png"); /* fallback for non image-set browser */
  transition-timing-function: ease-out;
  transition: 0.5s;
}
.contentbox .cornerimage#arpartycoins:hover {
  transform: rotateY(45deg) scale(1.4, 1);
}
@media (max-width: 800px) {
  .contentbox .cornerimage#arpartycoins {
    position: absolute;
  }
}
@media (max-width: 1160px) {
  .contentbox .cornerimage#arpartycoins {
    display: none;
  }
}

.inbetweenheaderimage {
  background-position: center center;
  background-repeat: no-repeat;
  width: 100vw;
  max-width: 1920px;
  border-radius: 18px;
  min-height: 550px;
  height: auto;
  background-size: cover;
}
.inbetweenheaderimage#arpartywelt {
  background-image: url("../Assets/ARPartyFeld.jpg"); /* fallback for non image-set browser */
}
.inbetweenheaderimage#mavesquewelt {
  background-image: url("../Assets/AppStoreBilderCollection.png"); /* fallback for non image-set browser */
}

#impressum h3 {
  margin-top: 50px;
}
#impressum h2 {
  margin-top: 80px;
}

.cardgrid {
  margin-top: var(--spacing);
}
.cardgrid .headline {
  text-align: center;
}
.cardgrid .row {
  display: flex;
  flex-wrap: wrap;
  width: auto;
}
.cardgrid .row .gridcard {
  width: 45%;
  margin: auto;
  margin-bottom: 25px;
  height: 200px;
  border-radius: 18px;
  text-align: center;
  padding-top: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  transition-timing-function: ease-out;
  z-index: 10;
  transform: translateZ(300px);
  transition: 0.5s;
}
@media (max-width: 800px) {
  .cardgrid .row .gridcard {
    width: 100%;
    z-index: 10;
    transform: translateZ(0px);
  }
}
.cardgrid .row .gridcard:hover {
  transform: translateZ(300px) rotateY(45deg) scale(1.4, 1);
}
@media (max-width: 800px) {
  .cardgrid .row .gridcard:hover {
    transform: translateZ(0px);
  }
}
.cardgrid .row .gridcard:hover h3 {
  margin-top: -25px;
}
.cardgrid .row .gridcard:hover p {
  opacity: 0.8;
}
.cardgrid .row .gridcard:hover .blurrit {
  opacity: 1;
}
.cardgrid .row .gridcard#positivesfeld {
  background-image: url("../Assets/Feld_Positiv.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard#negativesfeld {
  background-image: url("../Assets/Feld_Neg.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard#vsfeld {
  background-image: url("../Assets/Feld_VS.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard#walletfeld {
  background-image: url("../Assets/WalletFeld.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard#pi_maschine_1 {
  background-image: url("../Assets/PI_Maschine_1.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard#pi_maschine_2 {
  background-image: url("../Assets/PI_Maschine_2.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard#pi_maschine_3 {
  background-image: url("../Assets/PI_Maschine_3.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard#pi_maschine_4 {
  background-image: url("../Assets/PI_Maschine_4.jpg"); /* fallback for non image-set browser */
}
.cardgrid .row .gridcard h3 {
  margin: auto;
  margin-top: 25px;
  transition-timing-function: ease-out;
  transition: 0.5s;
  z-index: 10;
  position: absolute;
  width: 100%;
}
.cardgrid .row .gridcard p {
  width: 75%;
  margin: auto;
  margin-top: 25px;
  opacity: 0;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
.cardgrid .row .gridcard .blurrit {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 15px 15px 15px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(25px);
  transition-timing-function: ease-out;
  transition: 0.5s;
}

.items {
  margin-top: var(--spacing);
  width: 100%;
  margin-bottom: var(--spacing);
}
.items h3 {
  width: 100%;
  text-align: center;
}
.items .rowoffour {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
}
.items .rowoffour .item {
  width: 22%;
  min-width: 200px;
  height: auto;
  min-height: 500px;
  margin: auto;
  position: relative;
  border-radius: 18px;
}
@media (max-width: 1160px) {
  .items .rowoffour .item {
    width: 45%;
    margin-top: 15px;
    border-radius: 18px;
    overflow: hidden;
  }
  .items .rowoffour .item div {
    width: 100%;
  }
  .items .rowoffour .item div video {
    margin-left: 0px !important;
  }
}
@media (max-width: 800px) {
  .items .rowoffour .item {
    width: 100%;
    margin-top: 15px;
    border-radius: 18px;
    overflow: hidden;
  }
}
.items .rowoffour .item .itemtext {
  top: 0px;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 26px;
  font-weight: 100;
  opacity: 1;
  margin-top: 15px;
}
@media (max-width: 1160px) {
  .items .rowoffour .item .itemtext {
    width: 100%;
    text-align: center;
  }
}
.items .rowoffour .item div {
  width: 100%;
  height: 250px;
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 1160px) {
  .items .rowoffour .item div {
    width: 100%;
  }
}
@media (max-width: 800px) {
  .items .rowoffour .item div {
    width: 100%;
  }
}
.items .rowoffour .item div video {
  border-radius: 18px !important;
  width: 100%;
  height: 250px;
  object-fit: cover;
}
@media (max-width: 800px) {
  .items .rowoffour .item div video {
    width: 100%;
  }
}
@media (max-width: 1160px) {
  .items .rowoffour .item div video {
    margin-left: -100px;
  }
}

@media (max-width: 1160px) {
  .walletguy {
    margin-top: 50px;
  }
}

@media (max-width: 800px) {
  .characterinline {
    width: 100%;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 50px;
  }
}
.characterinline #walletguy3D {
  position: absolute;
  right: 20vw;
  margin-top: -420px;
  width: 23%;
  height: 43%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../Assets/WalletGuy3D.png");
}
@media (max-width: 1160px) {
  .characterinline #walletguy3D {
    display: none;
  }
}
.characterinline #sofaguy3D {
  position: absolute;
  right: 3vw;
  width: 27%;
  margin-top: -1000px;
  overflow: hidden;
  background-image: url("../Assets/3DSofa.png");
  height: 40%;
  background-repeat: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 1160px) {
  .characterinline #sofaguy3D {
    display: none;
  }
}
.characterinline .block1 {
  margin-bottom: 25px;
  margin-top: 50px;
  margin-left: 15%;
  width: 45%;
  line-height: 1.4;
}
@media (max-width: 800px) {
  .characterinline .block1 {
    width: 100%;
    margin: auto;
    margin-top: var(--spacing);
  }
}
@media (max-width: 1160px) {
  .characterinline .block1 {
    width: 100%;
    margin: auto;
    margin-top: var(--spacing);
  }
}
.characterinline .block1 div {
  font-weight: 800;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 26px;
  letter-spacing: 3px;
}
@media (max-width: 1160px) {
  .characterinline .block1 div {
    text-align: center;
  }
}
.characterinline .block1 p {
  font-family: novel-sans-pro;
  font-size: 20px;
  opacity: 0.8;
  line-height: 32px;
}
.characterinline .block2 {
  display: flex;
  flex-wrap: wrap;
}
.characterinline .block2 div {
  width: 45%;
  margin: auto;
  height: auto;
  min-height: 400px;
}

/* NEW Styles*/
.flex-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.relative {
  position: relative;
}

.preserve3D {
  transform-style: preserve-3d;
}
@media (max-width: 800px) {
  .preserve3D {
    transform-style: flat;
  }
}

.transform3D {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 1500px);
}
@media (max-width: 800px) {
  .transform3D {
    transform-style: flat;
    transform: translate3d(0, 0, 0) !important;
  }
}
@media (max-width: 800px) {
  .transform3D:hover {
    transform: translate3d(0, 0, 0) !important;
  }
}
.transform3D:hover .singlePicCard {
  transform: translate3d(0, 0, 100px);
}
.transform3D:hover #maske1 {
  transform: translate3d(0, -50px, 75px);
}
.transform3D:hover #tinyFinsMain {
  transform: translate3d(0, -25px, 37.5px);
}
.transform3D:hover #tinyFinsMain .fish1 {
  transform: translate3d(0, -10px, 125px);
}
.transform3D:hover #veltinsMain {
  transform: translate3d(0, -25px, 37.5px);
}
.transform3D:hover #arPartyMain {
  transform: translate3d(0, -25px, 37.5px);
}
.transform3D:hover #mavesqueMain {
  transform: translate3d(0, -25px, 37.5px);
}
.transform3D:hover #mavesqueMain.monte {
  transform: translate3d(0px, -10px, 75px);
}
.transform3D:hover #mavesqueMain.chev {
  transform: translate3d(0, -10px, 125px);
}
.transform3D:hover #playmobilProMain {
  transform: translate3d(0, -25px, 37.5px);
}
.transform3D:hover #playmobilProIconBlurred {
  transform: translate3d(0, -25px, 125px);
}
.transform3D:hover #maske2 {
  transform: translate3d(0, -40px, 150px);
}
.transform3D:hover #tinyFinsBlurred {
  transform: translate3d(0, -20px, 75px);
}
.transform3D:hover #arPartyBlurred {
  transform: translate3d(0, -20px, 75px);
}
.transform3D:hover #playmobilProBang {
  transform: translate3d(0, -30px, 100px);
}
.transform3D:hover #playmobilProCrash {
  transform: translate3d(0, -10px, 150px);
}
.transform3D:hover #maske3 {
  transform: translate3d(0, -20px, 300px);
}
.transform3D:hover #espresso {
  transform: translate3d(0, -10px, 150px);
}
.transform3D:hover #mavesquelogo {
  transform: translate3d(0, -10px, 150px);
}
.transform3D:hover #mercedesMain {
  transform: translate3d(0, -25px, 37.5px);
}
.transform3D:hover #mercedesDetail {
  transform: translate3d(0, -10px, 150px);
}
.transform3D:hover .cornerimage {
  transform: translate3d(0, -10px, 350px);
}
.transform3D:hover .img3DContainer {
  transform: translate3d(0, -25px, 37.5px);
}
.transform3D:hover:hover {
  transform: translate3d(0, -10px, 200px);
}
@media (max-width: 800px) {
  .transform3D:hover:hover {
    transform: translate3d(0, 0, 0) !important;
  }
}

.singlePicCard {
  position: absolute;
  display: flex;
  justify-content: center;
  transition: 0.5s;
  width: 100%;
  margin-top: -75px;
}
.singlePicCard img {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  margin: auto;
  transform: translateY(-60px);
}

.displayContent {
  display: contents;
}

.multiPicCard {
  position: absolute;
  display: flex;
  justify-content: center;
  transition: 0.5s;
  /* JUDITH MASKEN */
}
.multiPicCard .maske {
  transition: 0.5s;
  position: absolute;
  border-radius: 10px;
  object-fit: cover;
  margin: auto;
  transform: translate3d(0, -60px, 0px);
}
.multiPicCard.smallProjectCard {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.multiPicCard.smallProjectCard .img3DContainer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  right: 0%;
  left: 0%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard.smallProjectCard .img3DContainer {
    width: 100%;
    right: 0%;
    left: 0%;
  }
}
.multiPicCard.smallProjectCard .img3DContainer .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 18px;
  object-fit: cover;
  z-index: 2;
}
.multiPicCard.smallProjectCard .img3DContainer .cutout {
  position: absolute;
  height: 115%;
  bottom: 4px;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
.multiPicCard {
  /* Playmobil Pro */
}
.multiPicCard#playmobilPro {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.multiPicCard#playmobilPro #playmobilProMain {
  position: absolute;
  bottom: 0px;
  width: 55%;
  left: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#playmobilPro #playmobilProMain {
    width: 100%;
    right: 0%;
    left: 0%;
  }
}
.multiPicCard#playmobilPro #playmobilProMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 18px;
  object-fit: cover;
  z-index: 2;
}
.multiPicCard#playmobilPro #playmobilProMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  z-index: 3;
  bottom: 4px;
}
.multiPicCard#playmobilPro #playmobilProCrash {
  position: absolute;
  bottom: 120px;
  width: 15%;
  height: 145px;
  left: -5%;
  border-radius: 18px;
  z-index: 5;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#playmobilPro #playmobilProCrash {
    display: none;
  }
}
.multiPicCard#playmobilPro #playmobilProIconBlurred {
  position: absolute;
  bottom: 200px;
  width: 150px;
  height: 90px;
  right: 33%;
  padding: 35px 0;
  border-radius: 18px;
  background: linear-gradient(to Right, rgba(181, 20, 49, 0.3607843137), rgba(255, 255, 255, 0.0588235294));
  z-index: 4;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}
.multiPicCard#playmobilPro #playmobilProIconBlurred img {
  width: 125%;
  margin: -40px 0px;
}
@media (max-width: 1160px) {
  .multiPicCard#playmobilPro #playmobilProIconBlurred {
    display: none;
  }
}
.multiPicCard#playmobilPro #playmobilProBang {
  position: absolute;
  bottom: 25px;
  right: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#playmobilPro #playmobilProBang {
    width: 100%;
    right: 0%;
  }
}
.multiPicCard#playmobilPro #playmobilProBang img {
  border-radius: 18px;
  height: 250px;
}
.multiPicCard {
  /* TinyFins */
}
.multiPicCard#tinyFins {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.multiPicCard#tinyFins #tinyFinsMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#tinyFins #tinyFinsMain {
    width: 100%;
    right: 0%;
  }
}
.multiPicCard#tinyFins #tinyFinsMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  z-index: 2;
}
.multiPicCard#tinyFins #tinyFinsMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
.multiPicCard#tinyFins #tinyFinsMain .ring {
  width: 55%;
  transform: translate(-50%, 0px);
  left: 50%;
}
@media (max-width: 800px) {
  .multiPicCard#tinyFins #tinyFinsMain .ring {
    width: 100%;
    height: auto;
    top: -100px;
  }
}
.multiPicCard#tinyFins #tinyFinsMain .fish {
  width: 60%;
  transform: translate(-44%, -40px) scale(1.5);
  left: 50%;
}
@media (max-width: 800px) {
  .multiPicCard#tinyFins #tinyFinsMain .fish {
    width: 75%;
    height: auto;
    margin-left: -15px;
    top: 110px;
    overflow-x: hidden;
  }
}
.multiPicCard#tinyFins #tinyFinsMain .fish1 {
  width: 60%;
  transform: translate(-44%, -40px) scale(1.5);
  left: 50%;
  z-index: 11;
  left: 20%;
  height: 310px;
  width: 100%;
}
.multiPicCard#tinyFins #tinyFinsMain .bubble2 {
  width: 100%;
  height: auto;
  top: -280px;
  right: 0;
}
.multiPicCard#tinyFins #espresso {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: 242px;
  left: 5%;
  padding: 35px 0;
  border-radius: 18px;
  z-index: 4;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#tinyFins #espresso {
    display: none;
  }
}
.multiPicCard#tinyFins #espresso .fish1 {
  width: 60%;
  transform: translate(-44%, -40px) scale(1.5);
  left: 50%;
  z-index: 11;
  left: 20%;
  height: 310px;
  width: 100%;
}
.multiPicCard#tinyFins #tinyFinsBlurred {
  position: absolute;
  bottom: 190px;
  width: 15%;
  height: 145px;
  left: 18%;
  border-radius: 18px;
  z-index: 3;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#tinyFins #tinyFinsBlurred {
    display: none;
  }
}
.multiPicCard#tinyFins video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.multiPicCard#tinyFins .imgCover {
  width: 80%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  margin: auto;
}
.multiPicCard#tinyFins .imgContain {
  width: 83%;
  height: 300px;
  border-radius: 10px;
  object-fit: contain;
  margin: auto;
}
.multiPicCard {
  /* Veltins */
}
.multiPicCard#veltins {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.multiPicCard#veltins #veltinsMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#veltins #veltinsMain {
    width: 100%;
    right: 0%;
  }
}
.multiPicCard#veltins #veltinsMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  z-index: 2;
}
.multiPicCard#veltins #veltinsMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
.multiPicCard#veltins #veltinsMain .ring {
  width: 55%;
  transform: translate(-50%, 0px);
  left: 50%;
}
@media (max-width: 800px) {
  .multiPicCard#veltins #veltinsMain .ring {
    width: 100%;
    height: auto;
    top: -100px;
  }
}
.multiPicCard#veltins #veltinsMain .fish {
  width: 60%;
  transform: translate(-44%, -40px) scale(1.5);
  left: 50%;
}
@media (max-width: 800px) {
  .multiPicCard#veltins #veltinsMain .fish {
    width: 75%;
    height: auto;
    margin-left: -15px;
    top: 110px;
    overflow-x: hidden;
  }
}
.multiPicCard#veltins #veltinsMain .fish1 {
  width: 60%;
  transform: translate(-44%, -40px) scale(1.5);
  left: 50%;
  z-index: 11;
  left: 20%;
  height: 310px;
  width: 100%;
}
.multiPicCard#veltins #veltinsMain .bubble2 {
  width: 100%;
  height: auto;
  top: -280px;
  right: 0;
}
.multiPicCard#veltins #espresso {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: auto;
  left: 5%;
  padding: 60px 0;
  border-radius: 18px;
  z-index: 4;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#veltins #espresso {
    display: none;
  }
}
.multiPicCard#veltins #espresso img {
  height: auto;
}
.multiPicCard#veltins #espresso .fish1 {
  width: 60%;
  transform: translate(-44%, -40px) scale(1.5);
  left: 50%;
  z-index: 11;
  left: 20%;
  height: 310px;
  width: 100%;
}
.multiPicCard#veltins #veltinsBlurred {
  position: absolute;
  bottom: 190px;
  width: 15%;
  height: 145px;
  left: 18%;
  border-radius: 18px;
  z-index: 3;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#veltins #veltinsBlurred {
    display: none;
  }
}
.multiPicCard#veltins video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.multiPicCard#veltins .imgCover {
  width: 80%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  margin: auto;
}
.multiPicCard#veltins .imgContain {
  width: 83%;
  height: 300px;
  border-radius: 10px;
  object-fit: contain;
  margin: auto;
}
.multiPicCard {
  /* AR PARTY */
}
.multiPicCard#arParty {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.multiPicCard#arParty #arPartyMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#arParty #arPartyMain {
    width: 100%;
    right: 0%;
  }
}
.multiPicCard#arParty #arPartyMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  z-index: 2;
}
.multiPicCard#arParty #arPartyMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
.multiPicCard#arParty #espresso {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: 225px;
  left: 5%;
  padding: 35px 0;
  border-radius: 18px;
  z-index: 4;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#arParty #espresso {
    display: none;
  }
}
.multiPicCard#arParty #arPartyBlurred {
  position: absolute;
  bottom: 190px;
  width: 15%;
  height: 145px;
  left: -5%;
  border-radius: 18px;
  background: linear-gradient(to Right, rgba(181, 20, 49, 0.3607843137), rgba(255, 255, 255, 0.0588235294));
  z-index: 5;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#arParty #arPartyBlurred {
    display: none;
  }
}
.multiPicCard#arParty video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.multiPicCard#arParty .imgCover {
  width: 80%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  margin: auto;
}
.multiPicCard#arParty .imgContain {
  width: 83%;
  height: 300px;
  border-radius: 10px;
  object-fit: contain;
  margin: auto;
}
.multiPicCard {
  /* Mercedes CLA Weltpremiere */
}
.multiPicCard#mercedes {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.multiPicCard#mercedes #mercedesMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#mercedes #mercedesMain {
    width: 100%;
    right: 0%;
  }
}
.multiPicCard#mercedes #mercedesMain .imgCover {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center 50%;
  z-index: 2;
}
.multiPicCard#mercedes #mercedesDetail {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: auto;
  left: 5%;
  padding: 60px 0;
  border-radius: 18px;
  z-index: 4;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#mercedes #mercedesDetail {
    display: none;
  }
}
.multiPicCard#mercedes #mercedesDetail img, .multiPicCard#mercedes #mercedesDetail video {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  object-fit: cover;
}
.multiPicCard#mavesque {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.multiPicCard#mavesque #mavesqueMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .multiPicCard#mavesque #mavesqueMain {
    width: 100%;
    right: 0%;
  }
}
.multiPicCard#mavesque #mavesqueMain .imgCover {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  object-fit: cover;
  z-index: 2;
}
.multiPicCard#mavesque #mavesqueMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
.multiPicCard#mavesque #mavesqueMain .cutout2 {
  position: absolute;
  height: 100%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  z-index: 3;
}
.multiPicCard#mavesque #mavesquelogo {
  position: absolute;
  bottom: 50px;
  width: 20%;
  height: 200px;
  left: 5%;
  padding: 35px 0;
  border-radius: 18px;
  z-index: 4;
  overflow: hidden;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
  filter: contrast(75%);
}
.multiPicCard#mavesque #mavesquelogo video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
@media (max-width: 800px) {
  .multiPicCard#mavesque #mavesquelogo {
    display: none;
  }
}

.card-header#tinyFins {
  transform: translate3d(0px, 230px, 200px);
}
.card-header#tinyFins #tinyFinsMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#tinyFins #tinyFinsMain {
    width: 100%;
    right: 0%;
  }
}
.card-header#tinyFins #tinyFinsMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
}
.card-header#tinyFins #tinyFinsMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
}
.card-header#tinyFins #espresso {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: 225px;
  left: 5%;
  padding: 35px 0;
  border-radius: 18px;
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#tinyFins #espresso {
    display: none;
  }
}
.card-header#tinyFins #tinyFinsBlurred {
  position: absolute;
  bottom: 190px;
  width: 15%;
  height: 145px;
  left: -5%;
  border-radius: 18px;
  background: linear-gradient(to Right, rgba(181, 20, 49, 0.3607843137), rgba(255, 255, 255, 0.0588235294));
  backdrop-filter: blur(25px);
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#tinyFins #tinyFinsBlurred {
    display: none;
  }
}
.card-header#arParty {
  transform: translate3d(0px, 230px, 200px);
}
.card-header#arParty #arPartyMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#arParty #arPartyMain {
    width: 100%;
    right: 0%;
  }
}
.card-header#arParty #arPartyMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
}
.card-header#arParty #arPartyMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
}
.card-header#arParty #espresso {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: 225px;
  left: 5%;
  padding: 35px 0;
  border-radius: 18px;
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#arParty #espresso {
    display: none;
  }
}
.card-header#arParty #arPartyBlurred {
  position: absolute;
  bottom: 190px;
  width: 15%;
  height: 145px;
  left: -5%;
  border-radius: 18px;
  background: linear-gradient(to Right, rgba(181, 20, 49, 0.3607843137), rgba(255, 255, 255, 0.0588235294));
  backdrop-filter: blur(25px);
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#arParty #arPartyBlurred {
    display: none;
  }
}
.card-header#playmobilPro {
  transform: translate3d(0px, 230px, 100px);
}
.card-header#playmobilPro #playmobilProMain {
  position: absolute;
  bottom: 0px;
  width: 55%;
  left: 5%;
  transform: translateZ(60px);
}
@media (max-width: 800px) {
  .card-header#playmobilPro #playmobilProMain {
    width: 100%;
    left: 0%;
  }
}
.card-header#playmobilPro #playmobilProMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
}
.card-header#playmobilPro #playmobilProMain .cutout {
  position: absolute;
  height: 122%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
}
.card-header#playmobilPro #playmobilProBang {
  position: absolute;
  bottom: 0px;
  width: 40%;
  height: 239px;
  right: 5%;
  padding: 35px 0;
  border-radius: 18px;
  transform: translateZ(120px);
}
.card-header#playmobilPro #playmobilProBang img {
  box-shadow: -5px 9px 17px 0px rgba(12, 1, 22, 0.3294117647);
}
@media (max-width: 800px) {
  .card-header#playmobilPro #playmobilProBang {
    display: none;
  }
}
.card-header#playmobilPro #playmobilProBang .imgCover {
  width: 100%;
  height: 230px;
}
.card-header#playmobilPro #playmobilProCrash {
  position: absolute;
  bottom: 0px;
  width: 40%;
  height: 239px;
  left: -5%;
  padding: 35px 0;
  border-radius: 18px;
  transform: translateZ(120px);
}
@media (max-width: 800px) {
  .card-header#playmobilPro #playmobilProCrash {
    display: none;
  }
}
.card-header#playmobilPro #playmobilProCrash .imgCover {
  width: 100%;
  height: 230px;
}
.card-header#playmobilPro #playmobilProBlurred {
  position: absolute;
  bottom: 231px;
  width: 10%;
  height: 99px;
  right: 39%;
  border-radius: 18px;
  backdrop-filter: blur(25px);
  transform: translateZ(180px);
}
@media (max-width: 800px) {
  .card-header#playmobilPro #playmobilProBlurred {
    display: none;
  }
}
.card-header#playmobilPro #playmobilProBlurred img {
  width: 140%;
}
.card-header {
  /* Mercedes CLA Weltpremiere */
}
.card-header#mercedes {
  transform: translate3d(0px, 230px, 0px);
  width: 100%;
}
.card-header#mercedes #mercedesMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transition-timing-function: ease-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .card-header#mercedes #mercedesMain {
    width: 100%;
    right: 0%;
  }
}
.card-header#mercedes #mercedesMain .imgCover {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center 30%;
  z-index: 2;
}
.card-header#mercedes #mercedesDetail {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: auto;
  left: 5%;
  padding: 60px 0;
  border-radius: 18px;
  z-index: 4;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}
@media (max-width: 800px) {
  .card-header#mercedes #mercedesDetail {
    display: none;
  }
}
.card-header#mercedes #mercedesDetail img, .card-header#mercedes #mercedesDetail video {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  object-fit: cover;
}
.card-header#mavesque #mavesqueMain {
  position: absolute;
  bottom: 0px;
  width: 75%;
  right: 5%;
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#mavesque #mavesqueMain {
    width: 100%;
    right: 0%;
  }
}
.card-header#mavesque #mavesqueMain .imgCover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  z-index: 5;
}
.card-header#mavesque #mavesqueMain .cutout {
  position: absolute;
  height: 125%;
  bottom: 0;
  width: 100%;
  object-fit: cover;
}
.card-header#mavesque #mavesquelogo {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: 225px;
  left: 5%;
  padding: 35px 0;
  border-radius: 18px;
  transform: translateZ(0px);
}
@media (max-width: 800px) {
  .card-header#mavesque #mavesquelogo {
    display: none;
  }
}
@media (max-width: 800px) {
  .card-header #masken {
    width: 120%;
    height: 350px;
  }
}
.card-header video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.card-header .imgCover {
  width: 80%;
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  margin: auto;
  z-index: 2;
}
.card-header .imgContain {
  width: 83%;
  height: 300px;
  border-radius: 10px;
  object-fit: contain;
  margin: auto;
}

.monte,
.chev {
  z-index: 3;
  margin-bottom: -5px;
  margin-right: -30px;
}
@media (max-width: 800px) {
  .monte,
  .chev {
    margin-right: 0px;
    display: none;
  }
}

.glass-card {
  border-radius: 18px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  transition: all 0.3s ease-out;
  z-index: -1;
}
@media (max-width: 800px) {
  .glass-card a {
    margin: 20px 0px;
  }
}
.glass-card .mobileunderlined {
  display: none;
  width: 50%;
  text-align: center;
  margin: auto;
}
@media (max-width: 800px) {
  .glass-card .mobileunderlined {
    display: block;
  }
}
.glass-card div.underliner {
  margin: auto;
  width: 40%;
  padding-bottom: 5px;
  border-bottom: 1px solid #dadada;
  display: none;
}
@media (max-width: 800px) {
  .glass-card div.underliner {
    display: block;
  }
}
.glass-card .card-content {
  padding: 15rem 5rem 5rem 5rem;
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  border-right: 3px solid rgba(255, 255, 255, 0.2);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  background: linear-gradient(135deg, transparent 0%, transparent 8%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0) 68%);
}
@media (max-width: 1160px) {
  .glass-card .card-content {
    padding: 15rem 2rem 3rem 2rem;
  }
}
@media (max-width: 800px) {
  .glass-card .card-content {
    padding: 15rem 2rem 2rem 2rem;
  }
}
.glass-card .card-content .blurred {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 15px 15px 15px 0 rgba(0, 0, 0, 0.3);
}
.glass-card .card-content .card-text {
  display: grid;
  grid-template-columns: 1.65fr 2fr;
  gap: 16px;
  grid-gap: 16px;
  align-items: baseline;
}
@media (max-width: 800px) {
  .glass-card .card-content .card-text {
    grid-template-columns: 1fr;
  }
}
.glass-card .card-content .card-text h3 {
  font-size: 36px;
  line-height: 42px;
  padding-top: 20px;
}
@media (max-width: 800px) {
  .glass-card .card-content .card-text h3 {
    grid-template-columns: 1fr;
    font-size: 30px;
    line-height: 34px;
  }
}
.glass-card .card-content .card-text .icon-list {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  transform: translateY(-10px);
}
@media (max-width: 800px) {
  .glass-card .card-content .card-text .icon-list {
    transform: translateY(0px);
  }
}
.glass-card .card-content .card-text .icon-list i {
  font-size: 18px;
  text-align: center;
  opacity: 0.3;
}
.glass-card .card-content .card-text .icon-list p {
  line-height: 22px;
  margin: 8px;
}
.glass-card .card-content .small-card {
  grid-template-columns: 1fr;
}
.glass-card .card-content button {
  margin-top: 10px;
}
@media (max-width: 800px) {
  .glass-card .card-content button {
    margin: 20px 0 10px 0;
  }
}

/* Section Playground */
#playground {
  padding: 200px 0;
}
@media (max-width: 800px) {
  #playground {
    padding: 120px 0;
  }
}
#playground .grid-12 {
  position: relative;
}
@media (max-width: 800px) {
  #playground #playgroundshufflebutton {
    display: none;
  }
}
#playground #playgroundnotemobile {
  display: none;
  margin-top: -10px;
  margin-bottom: 25px;
}
@media (max-width: 800px) {
  #playground #playgroundnotemobile {
    display: block;
    display: contents;
    margin-left: 188px;
    transform: translateX(50px);
    position: absolute;
  }
}
#playground #swipeicon {
  display: none;
  background: url("../Assets/swipeicon.png");
  background-size: cover;
  width: 50px;
  height: 50px;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 0px;
}
@media (max-width: 800px) {
  #playground #swipeicon {
    display: block;
  }
}
#playground .playgroundflieger {
  position: absolute;
  left: 50vw;
  z-index: -1;
  transition-timing-function: ease-out;
  transition: 0.5s;
  z-index: -1;
  width: 30%;
  height: 20%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../Assets/3DPlane.png");
}
@media (max-width: 800px) {
  #playground .playgroundflieger {
    display: none;
  }
}
#playground .col2-span6 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#playground .scrolling-wrapper {
  padding-top: 100px;
  display: flex;
  flex-wrap: nowrap;
  overflow-y: visible;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  width: 100%;
  position: relative;
  z-index: 5;
}
#playground .scrolling-wrapper.minigames {
  margin-bottom: 25px;
  padding-bottom: 15px;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 2540px) {
  #playground .scrolling-wrapper.minigames {
    justify-content: left;
  }
}
@media (max-width: 800px) {
  #playground .scrolling-wrapper.minigames {
    padding-right: 0px !important;
  }
}
#playground .scrolling-wrapper .minigamecard {
  border-radius: 1em;
  flex: 0 0 auto;
  max-height: 300px;
  height: auto;
  width: 500px;
  background: rgba(255, 255, 255, 0.1019607843);
  margin: 16px;
  margin-top: -15px;
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 1000;
}
#playground .scrolling-wrapper .minigamecard:hover {
  transform: translateY(-15px);
}
#playground .scrolling-wrapper .minigamecard:hover .arrowdown {
  margin-top: -55px;
  margin-left: 440px;
  width: 30px;
  height: 30px;
  background-image: url("../Assets/arrow_white.svg");
  opacity: 1;
}
#playground .scrolling-wrapper .minigamecard .gameinfo {
  display: none;
  padding-right: 25px;
  padding-bottom: 25px;
}
#playground .scrolling-wrapper .minigamecard .headerpicture {
  min-height: 200px;
  border-radius: 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#playground .scrolling-wrapper .minigamecard .headerpicture#scrapyard {
  background-image: url("../Assets/ScrapYard_2.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard .headerpicture#lava {
  background-image: url("../Assets/BodenIstLava.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard .headerpicture#treasurehunt {
  background-image: url("../Assets/TreasureHunt_2.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard .headerpicture#mistkaefer {
  background-image: url("../Assets/DungBeetle_2.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard .headerpicture#cointoss {
  background-image: url("../Assets/CoinToss.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard .headerpicture#targetshooting {
  background-image: url("../Assets/TargetShooter.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard .headerpicture#rumble {
  background-image: url("../Assets/Rumble.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard .headerpicture#scraptransport {
  background-image: url("../Assets/Transport.jpg"); /* fallback for non image-set browser */
}
#playground .scrolling-wrapper .minigamecard p {
  margin-left: 25px;
  margin-top: 15px;
}
#playground .scrolling-wrapper .minigamecard h3 {
  margin-left: 25px;
  margin-top: -20px;
}
#playground .scrolling-wrapper .minigamecard .arrowdown {
  width: 25px;
  height: 25px;
  margin-top: -50px;
  margin-left: 445px;
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("../Assets/arrow_white.svg");
  transition: all 0.3s ease-out;
  opacity: 0.8;
}
#playground .scrolling-wrapper .playgroundCard {
  border-radius: 1em;
  flex: 0 0 auto;
  height: 300px;
  width: 300px;
  background: rgba(255, 255, 255, 0.1019607843);
  margin: 16px;
}
#playground .scrolling-wrapper .playgroundCard:nth-child(odd) {
  height: 400px;
  width: 600px;
}
#playground .scrolling-wrapper .playgroundCard:nth-child(3n+0) {
  height: 500px;
  width: 300px;
}
#playground .scrolling-wrapper .playgroundCard:nth-child(1) {
  margin-left: 10%;
}

#arpartyfootervideo {
  width: 90vw;
  margin: auto;
  height: contain;
}
#arpartyfootervideo video {
  margin: auto;
  border-radius: 18px;
  width: 90vw;
}
@media (max-width: 800px) {
  #arpartyfootervideo {
    display: none;
  }
}

/* Section Contact */
#contactUs {
  mix-blend-mode: screen;
  text-align: center;
  max-width: 125ch;
  margin-left: auto;
  margin-right: auto;
}

/* Section Footer */
#footer {
  padding: 150px 0;
  padding-bottom: 350px;
}
@media (max-width: 800px) {
  #footer {
    padding-bottom: 150px;
  }
}
#footer .grid12 {
  align-items: start;
  grid-template-rows: 80px 50px min-content min-content;
  z-index: 1;
}
#footer hr {
  width: 100%;
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #eee, #a69aed);
}
@media (max-width: 1160px) {
  #footer hr {
    margin-left: -25px;
  }
}
@media (max-width: 800px) {
  #footer hr {
    margin-left: 0px;
  }
}
#footer .ditachedLogo {
  display: flex;
  align-items: center;
}
#footer .ditachedLogo div {
  background-image: url(../Assets/LogoSVG.svg);
  background-repeat: no-repeat;
  height: 36px;
  width: 50px;
  background-size: 100%;
  background-position: center center;
  margin-left: -10px;
}
#footer .sitemap-link {
  font-family: novel-sans-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;
  line-height: 38px;
}
#footer .social-link {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 26px;
  line-height: 38px;
  opacity: 1;
}
#footer span {
  opacity: 1;
}
#footer #gravityFooter {
  max-width: 100%;
  position: absolute;
  transform: translateY(-150px);
  padding-bottom: 50px;
}
@media (max-width: 800px) {
  #footer #gravityFooter {
    transform: translateY(200px);
  }
}

@media (max-width: 800px) {
  .extraMobileTopMargin {
    margin-top: 70px;
  }
}

#copyconfirmation {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  display: none;
  transition-timing-function: ease-out;
  transition: 0.5s;
}

#replytimebottom {
  display: flex;
}

.heros-mavesque {
  width: 100%;
  max-width: 1980px;
  display: flex;
  justify-content: space-evenly;
  padding-top: 240px;
  margin: auto;
}
@media (max-width: 800px) {
  .heros-mavesque {
    max-width: 66vw;
  }
}
.heros-mavesque img {
  max-height: 60vh;
  width: 15%;
}
@media (max-width: 800px) {
  .heros-mavesque img {
    width: 35%;
    margin: 0px;
    object-fit: contain;
    max-height: 50vh;
  }
}

#flaschenscan {
  width: 100%;
  border-radius: 18px;
}
@media (max-width: 800px) {
  #flaschenscan {
    margin-top: 20px;
  }
}

.flaschenscanFloatingItems {
  position: absolute;
  margin-left: -100px;
  margin-top: 150px;
}
@media (max-width: 800px) {
  .flaschenscanFloatingItems {
    margin-left: -200px;
  }
}
.flaschenscanFloatingItems img {
  width: 160px;
}

.greenscreenItems {
  position: relative;
}
.greenscreenItems img {
  width: 100%;
  border-radius: 18px;
}
.greenscreenItems .greenscreen {
  width: 48%;
  float: right;
}
@media (max-width: 800px) {
  .greenscreenItems .greenscreen {
    margin-top: -150px;
  }
}
.greenscreenItems .greenscreen-Bontemps {
  width: 66%;
  position: absolute;
}
@media (max-width: 800px) {
  .greenscreenItems .greenscreen-Bontemps {
    padding-top: 100px;
  }
}
.greenscreenItems .greenscreen-Seppi {
  width: 100%;
  position: absolute;
  bottom: 5px;
  right: -80px;
  overscroll-behavior: contain;
}
@media (max-width: 800px) {
  .greenscreenItems .greenscreen-Seppi {
    right: 0px;
  }
}

.padding-top-50 {
  padding-top: 50px;
}

.padding-top-100 {
  padding-top: 100px;
}

.padding-top-150 {
  padding-top: 150px;
}
@media (max-width: 800px) {
  .padding-top-150.lessOnMobile {
    padding-top: 75px;
  }
}

@media (max-width: 800px) {
  .mobileNoPadding {
    padding-top: 0px !important;
  }
}

.padding-top-200 {
  padding-top: 200px;
}
@media (max-width: 800px) {
  .padding-top-200.mobileNoPadding {
    padding-top: 0px;
  }
}
@media (max-width: 800px) {
  .padding-top-200.lessOnMobile {
    padding-top: 100px;
  }
}

.padding-top-250 {
  padding-top: 250px;
}
@media (max-width: 800px) {
  .padding-top-250.mobileNoPadding {
    padding-top: 0px;
  }
}
@media (max-width: 800px) {
  .padding-top-250.lessOnMobile {
    padding-top: 125px;
  }
}

.padding-top_-200 {
  padding-top: -200px;
}

.padding-bottom_-200 {
  padding-bottom: -200px;
}

.padding-left_-200 {
  padding-left: -200px;
}

.padding-right_-200 {
  padding-right: -200px;
}

.margin-top_-200 {
  margin-top: -200px;
}

.margin-bottom_-200 {
  margin-top: -200px;
}

.margin-left_-200 {
  margin-left: -200px;
}

.margin-right_-200 {
  margin-right: -200px;
}

@media (max-width: 800px) {
  .padding-top-S_-200 {
    padding-top: -200px;
  }
  .padding-bottom-S_-200 {
    padding-top: -200px;
  }
  .padding-left-S_-200 {
    padding-left: -200px;
  }
  .padding-right-S_-200 {
    padding-right: -200px;
  }
  .margin-top-S_-200 {
    margin-top: -200px;
  }
  .margin-bottom-S_-200 {
    margin-top: -200px;
  }
  .margin-left-S_-200 {
    margin-left: -200px;
  }
  .margin-right-S_-200 {
    margin-right: -200px;
  }
}
.padding-top_-190 {
  padding-top: -190px;
}

.padding-bottom_-190 {
  padding-bottom: -190px;
}

.padding-left_-190 {
  padding-left: -190px;
}

.padding-right_-190 {
  padding-right: -190px;
}

.margin-top_-190 {
  margin-top: -190px;
}

.margin-bottom_-190 {
  margin-top: -190px;
}

.margin-left_-190 {
  margin-left: -190px;
}

.margin-right_-190 {
  margin-right: -190px;
}

@media (max-width: 800px) {
  .padding-top-S_-190 {
    padding-top: -190px;
  }
  .padding-bottom-S_-190 {
    padding-top: -190px;
  }
  .padding-left-S_-190 {
    padding-left: -190px;
  }
  .padding-right-S_-190 {
    padding-right: -190px;
  }
  .margin-top-S_-190 {
    margin-top: -190px;
  }
  .margin-bottom-S_-190 {
    margin-top: -190px;
  }
  .margin-left-S_-190 {
    margin-left: -190px;
  }
  .margin-right-S_-190 {
    margin-right: -190px;
  }
}
.padding-top_-180 {
  padding-top: -180px;
}

.padding-bottom_-180 {
  padding-bottom: -180px;
}

.padding-left_-180 {
  padding-left: -180px;
}

.padding-right_-180 {
  padding-right: -180px;
}

.margin-top_-180 {
  margin-top: -180px;
}

.margin-bottom_-180 {
  margin-top: -180px;
}

.margin-left_-180 {
  margin-left: -180px;
}

.margin-right_-180 {
  margin-right: -180px;
}

@media (max-width: 800px) {
  .padding-top-S_-180 {
    padding-top: -180px;
  }
  .padding-bottom-S_-180 {
    padding-top: -180px;
  }
  .padding-left-S_-180 {
    padding-left: -180px;
  }
  .padding-right-S_-180 {
    padding-right: -180px;
  }
  .margin-top-S_-180 {
    margin-top: -180px;
  }
  .margin-bottom-S_-180 {
    margin-top: -180px;
  }
  .margin-left-S_-180 {
    margin-left: -180px;
  }
  .margin-right-S_-180 {
    margin-right: -180px;
  }
}
.padding-top_-170 {
  padding-top: -170px;
}

.padding-bottom_-170 {
  padding-bottom: -170px;
}

.padding-left_-170 {
  padding-left: -170px;
}

.padding-right_-170 {
  padding-right: -170px;
}

.margin-top_-170 {
  margin-top: -170px;
}

.margin-bottom_-170 {
  margin-top: -170px;
}

.margin-left_-170 {
  margin-left: -170px;
}

.margin-right_-170 {
  margin-right: -170px;
}

@media (max-width: 800px) {
  .padding-top-S_-170 {
    padding-top: -170px;
  }
  .padding-bottom-S_-170 {
    padding-top: -170px;
  }
  .padding-left-S_-170 {
    padding-left: -170px;
  }
  .padding-right-S_-170 {
    padding-right: -170px;
  }
  .margin-top-S_-170 {
    margin-top: -170px;
  }
  .margin-bottom-S_-170 {
    margin-top: -170px;
  }
  .margin-left-S_-170 {
    margin-left: -170px;
  }
  .margin-right-S_-170 {
    margin-right: -170px;
  }
}
.padding-top_-160 {
  padding-top: -160px;
}

.padding-bottom_-160 {
  padding-bottom: -160px;
}

.padding-left_-160 {
  padding-left: -160px;
}

.padding-right_-160 {
  padding-right: -160px;
}

.margin-top_-160 {
  margin-top: -160px;
}

.margin-bottom_-160 {
  margin-top: -160px;
}

.margin-left_-160 {
  margin-left: -160px;
}

.margin-right_-160 {
  margin-right: -160px;
}

@media (max-width: 800px) {
  .padding-top-S_-160 {
    padding-top: -160px;
  }
  .padding-bottom-S_-160 {
    padding-top: -160px;
  }
  .padding-left-S_-160 {
    padding-left: -160px;
  }
  .padding-right-S_-160 {
    padding-right: -160px;
  }
  .margin-top-S_-160 {
    margin-top: -160px;
  }
  .margin-bottom-S_-160 {
    margin-top: -160px;
  }
  .margin-left-S_-160 {
    margin-left: -160px;
  }
  .margin-right-S_-160 {
    margin-right: -160px;
  }
}
.padding-top_-150 {
  padding-top: -150px;
}

.padding-bottom_-150 {
  padding-bottom: -150px;
}

.padding-left_-150 {
  padding-left: -150px;
}

.padding-right_-150 {
  padding-right: -150px;
}

.margin-top_-150 {
  margin-top: -150px;
}

.margin-bottom_-150 {
  margin-top: -150px;
}

.margin-left_-150 {
  margin-left: -150px;
}

.margin-right_-150 {
  margin-right: -150px;
}

@media (max-width: 800px) {
  .padding-top-S_-150 {
    padding-top: -150px;
  }
  .padding-bottom-S_-150 {
    padding-top: -150px;
  }
  .padding-left-S_-150 {
    padding-left: -150px;
  }
  .padding-right-S_-150 {
    padding-right: -150px;
  }
  .margin-top-S_-150 {
    margin-top: -150px;
  }
  .margin-bottom-S_-150 {
    margin-top: -150px;
  }
  .margin-left-S_-150 {
    margin-left: -150px;
  }
  .margin-right-S_-150 {
    margin-right: -150px;
  }
}
.padding-top_-140 {
  padding-top: -140px;
}

.padding-bottom_-140 {
  padding-bottom: -140px;
}

.padding-left_-140 {
  padding-left: -140px;
}

.padding-right_-140 {
  padding-right: -140px;
}

.margin-top_-140 {
  margin-top: -140px;
}

.margin-bottom_-140 {
  margin-top: -140px;
}

.margin-left_-140 {
  margin-left: -140px;
}

.margin-right_-140 {
  margin-right: -140px;
}

@media (max-width: 800px) {
  .padding-top-S_-140 {
    padding-top: -140px;
  }
  .padding-bottom-S_-140 {
    padding-top: -140px;
  }
  .padding-left-S_-140 {
    padding-left: -140px;
  }
  .padding-right-S_-140 {
    padding-right: -140px;
  }
  .margin-top-S_-140 {
    margin-top: -140px;
  }
  .margin-bottom-S_-140 {
    margin-top: -140px;
  }
  .margin-left-S_-140 {
    margin-left: -140px;
  }
  .margin-right-S_-140 {
    margin-right: -140px;
  }
}
.padding-top_-130 {
  padding-top: -130px;
}

.padding-bottom_-130 {
  padding-bottom: -130px;
}

.padding-left_-130 {
  padding-left: -130px;
}

.padding-right_-130 {
  padding-right: -130px;
}

.margin-top_-130 {
  margin-top: -130px;
}

.margin-bottom_-130 {
  margin-top: -130px;
}

.margin-left_-130 {
  margin-left: -130px;
}

.margin-right_-130 {
  margin-right: -130px;
}

@media (max-width: 800px) {
  .padding-top-S_-130 {
    padding-top: -130px;
  }
  .padding-bottom-S_-130 {
    padding-top: -130px;
  }
  .padding-left-S_-130 {
    padding-left: -130px;
  }
  .padding-right-S_-130 {
    padding-right: -130px;
  }
  .margin-top-S_-130 {
    margin-top: -130px;
  }
  .margin-bottom-S_-130 {
    margin-top: -130px;
  }
  .margin-left-S_-130 {
    margin-left: -130px;
  }
  .margin-right-S_-130 {
    margin-right: -130px;
  }
}
.padding-top_-120 {
  padding-top: -120px;
}

.padding-bottom_-120 {
  padding-bottom: -120px;
}

.padding-left_-120 {
  padding-left: -120px;
}

.padding-right_-120 {
  padding-right: -120px;
}

.margin-top_-120 {
  margin-top: -120px;
}

.margin-bottom_-120 {
  margin-top: -120px;
}

.margin-left_-120 {
  margin-left: -120px;
}

.margin-right_-120 {
  margin-right: -120px;
}

@media (max-width: 800px) {
  .padding-top-S_-120 {
    padding-top: -120px;
  }
  .padding-bottom-S_-120 {
    padding-top: -120px;
  }
  .padding-left-S_-120 {
    padding-left: -120px;
  }
  .padding-right-S_-120 {
    padding-right: -120px;
  }
  .margin-top-S_-120 {
    margin-top: -120px;
  }
  .margin-bottom-S_-120 {
    margin-top: -120px;
  }
  .margin-left-S_-120 {
    margin-left: -120px;
  }
  .margin-right-S_-120 {
    margin-right: -120px;
  }
}
.padding-top_-110 {
  padding-top: -110px;
}

.padding-bottom_-110 {
  padding-bottom: -110px;
}

.padding-left_-110 {
  padding-left: -110px;
}

.padding-right_-110 {
  padding-right: -110px;
}

.margin-top_-110 {
  margin-top: -110px;
}

.margin-bottom_-110 {
  margin-top: -110px;
}

.margin-left_-110 {
  margin-left: -110px;
}

.margin-right_-110 {
  margin-right: -110px;
}

@media (max-width: 800px) {
  .padding-top-S_-110 {
    padding-top: -110px;
  }
  .padding-bottom-S_-110 {
    padding-top: -110px;
  }
  .padding-left-S_-110 {
    padding-left: -110px;
  }
  .padding-right-S_-110 {
    padding-right: -110px;
  }
  .margin-top-S_-110 {
    margin-top: -110px;
  }
  .margin-bottom-S_-110 {
    margin-top: -110px;
  }
  .margin-left-S_-110 {
    margin-left: -110px;
  }
  .margin-right-S_-110 {
    margin-right: -110px;
  }
}
.padding-top_-100 {
  padding-top: -100px;
}

.padding-bottom_-100 {
  padding-bottom: -100px;
}

.padding-left_-100 {
  padding-left: -100px;
}

.padding-right_-100 {
  padding-right: -100px;
}

.margin-top_-100 {
  margin-top: -100px;
}

.margin-bottom_-100 {
  margin-top: -100px;
}

.margin-left_-100 {
  margin-left: -100px;
}

.margin-right_-100 {
  margin-right: -100px;
}

@media (max-width: 800px) {
  .padding-top-S_-100 {
    padding-top: -100px;
  }
  .padding-bottom-S_-100 {
    padding-top: -100px;
  }
  .padding-left-S_-100 {
    padding-left: -100px;
  }
  .padding-right-S_-100 {
    padding-right: -100px;
  }
  .margin-top-S_-100 {
    margin-top: -100px;
  }
  .margin-bottom-S_-100 {
    margin-top: -100px;
  }
  .margin-left-S_-100 {
    margin-left: -100px;
  }
  .margin-right-S_-100 {
    margin-right: -100px;
  }
}
.padding-top_-90 {
  padding-top: -90px;
}

.padding-bottom_-90 {
  padding-bottom: -90px;
}

.padding-left_-90 {
  padding-left: -90px;
}

.padding-right_-90 {
  padding-right: -90px;
}

.margin-top_-90 {
  margin-top: -90px;
}

.margin-bottom_-90 {
  margin-top: -90px;
}

.margin-left_-90 {
  margin-left: -90px;
}

.margin-right_-90 {
  margin-right: -90px;
}

@media (max-width: 800px) {
  .padding-top-S_-90 {
    padding-top: -90px;
  }
  .padding-bottom-S_-90 {
    padding-top: -90px;
  }
  .padding-left-S_-90 {
    padding-left: -90px;
  }
  .padding-right-S_-90 {
    padding-right: -90px;
  }
  .margin-top-S_-90 {
    margin-top: -90px;
  }
  .margin-bottom-S_-90 {
    margin-top: -90px;
  }
  .margin-left-S_-90 {
    margin-left: -90px;
  }
  .margin-right-S_-90 {
    margin-right: -90px;
  }
}
.padding-top_-80 {
  padding-top: -80px;
}

.padding-bottom_-80 {
  padding-bottom: -80px;
}

.padding-left_-80 {
  padding-left: -80px;
}

.padding-right_-80 {
  padding-right: -80px;
}

.margin-top_-80 {
  margin-top: -80px;
}

.margin-bottom_-80 {
  margin-top: -80px;
}

.margin-left_-80 {
  margin-left: -80px;
}

.margin-right_-80 {
  margin-right: -80px;
}

@media (max-width: 800px) {
  .padding-top-S_-80 {
    padding-top: -80px;
  }
  .padding-bottom-S_-80 {
    padding-top: -80px;
  }
  .padding-left-S_-80 {
    padding-left: -80px;
  }
  .padding-right-S_-80 {
    padding-right: -80px;
  }
  .margin-top-S_-80 {
    margin-top: -80px;
  }
  .margin-bottom-S_-80 {
    margin-top: -80px;
  }
  .margin-left-S_-80 {
    margin-left: -80px;
  }
  .margin-right-S_-80 {
    margin-right: -80px;
  }
}
.padding-top_-70 {
  padding-top: -70px;
}

.padding-bottom_-70 {
  padding-bottom: -70px;
}

.padding-left_-70 {
  padding-left: -70px;
}

.padding-right_-70 {
  padding-right: -70px;
}

.margin-top_-70 {
  margin-top: -70px;
}

.margin-bottom_-70 {
  margin-top: -70px;
}

.margin-left_-70 {
  margin-left: -70px;
}

.margin-right_-70 {
  margin-right: -70px;
}

@media (max-width: 800px) {
  .padding-top-S_-70 {
    padding-top: -70px;
  }
  .padding-bottom-S_-70 {
    padding-top: -70px;
  }
  .padding-left-S_-70 {
    padding-left: -70px;
  }
  .padding-right-S_-70 {
    padding-right: -70px;
  }
  .margin-top-S_-70 {
    margin-top: -70px;
  }
  .margin-bottom-S_-70 {
    margin-top: -70px;
  }
  .margin-left-S_-70 {
    margin-left: -70px;
  }
  .margin-right-S_-70 {
    margin-right: -70px;
  }
}
.padding-top_-60 {
  padding-top: -60px;
}

.padding-bottom_-60 {
  padding-bottom: -60px;
}

.padding-left_-60 {
  padding-left: -60px;
}

.padding-right_-60 {
  padding-right: -60px;
}

.margin-top_-60 {
  margin-top: -60px;
}

.margin-bottom_-60 {
  margin-top: -60px;
}

.margin-left_-60 {
  margin-left: -60px;
}

.margin-right_-60 {
  margin-right: -60px;
}

@media (max-width: 800px) {
  .padding-top-S_-60 {
    padding-top: -60px;
  }
  .padding-bottom-S_-60 {
    padding-top: -60px;
  }
  .padding-left-S_-60 {
    padding-left: -60px;
  }
  .padding-right-S_-60 {
    padding-right: -60px;
  }
  .margin-top-S_-60 {
    margin-top: -60px;
  }
  .margin-bottom-S_-60 {
    margin-top: -60px;
  }
  .margin-left-S_-60 {
    margin-left: -60px;
  }
  .margin-right-S_-60 {
    margin-right: -60px;
  }
}
.padding-top_-50 {
  padding-top: -50px;
}

.padding-bottom_-50 {
  padding-bottom: -50px;
}

.padding-left_-50 {
  padding-left: -50px;
}

.padding-right_-50 {
  padding-right: -50px;
}

.margin-top_-50 {
  margin-top: -50px;
}

.margin-bottom_-50 {
  margin-top: -50px;
}

.margin-left_-50 {
  margin-left: -50px;
}

.margin-right_-50 {
  margin-right: -50px;
}

@media (max-width: 800px) {
  .padding-top-S_-50 {
    padding-top: -50px;
  }
  .padding-bottom-S_-50 {
    padding-top: -50px;
  }
  .padding-left-S_-50 {
    padding-left: -50px;
  }
  .padding-right-S_-50 {
    padding-right: -50px;
  }
  .margin-top-S_-50 {
    margin-top: -50px;
  }
  .margin-bottom-S_-50 {
    margin-top: -50px;
  }
  .margin-left-S_-50 {
    margin-left: -50px;
  }
  .margin-right-S_-50 {
    margin-right: -50px;
  }
}
.padding-top_-40 {
  padding-top: -40px;
}

.padding-bottom_-40 {
  padding-bottom: -40px;
}

.padding-left_-40 {
  padding-left: -40px;
}

.padding-right_-40 {
  padding-right: -40px;
}

.margin-top_-40 {
  margin-top: -40px;
}

.margin-bottom_-40 {
  margin-top: -40px;
}

.margin-left_-40 {
  margin-left: -40px;
}

.margin-right_-40 {
  margin-right: -40px;
}

@media (max-width: 800px) {
  .padding-top-S_-40 {
    padding-top: -40px;
  }
  .padding-bottom-S_-40 {
    padding-top: -40px;
  }
  .padding-left-S_-40 {
    padding-left: -40px;
  }
  .padding-right-S_-40 {
    padding-right: -40px;
  }
  .margin-top-S_-40 {
    margin-top: -40px;
  }
  .margin-bottom-S_-40 {
    margin-top: -40px;
  }
  .margin-left-S_-40 {
    margin-left: -40px;
  }
  .margin-right-S_-40 {
    margin-right: -40px;
  }
}
.padding-top_-30 {
  padding-top: -30px;
}

.padding-bottom_-30 {
  padding-bottom: -30px;
}

.padding-left_-30 {
  padding-left: -30px;
}

.padding-right_-30 {
  padding-right: -30px;
}

.margin-top_-30 {
  margin-top: -30px;
}

.margin-bottom_-30 {
  margin-top: -30px;
}

.margin-left_-30 {
  margin-left: -30px;
}

.margin-right_-30 {
  margin-right: -30px;
}

@media (max-width: 800px) {
  .padding-top-S_-30 {
    padding-top: -30px;
  }
  .padding-bottom-S_-30 {
    padding-top: -30px;
  }
  .padding-left-S_-30 {
    padding-left: -30px;
  }
  .padding-right-S_-30 {
    padding-right: -30px;
  }
  .margin-top-S_-30 {
    margin-top: -30px;
  }
  .margin-bottom-S_-30 {
    margin-top: -30px;
  }
  .margin-left-S_-30 {
    margin-left: -30px;
  }
  .margin-right-S_-30 {
    margin-right: -30px;
  }
}
.padding-top_-20 {
  padding-top: -20px;
}

.padding-bottom_-20 {
  padding-bottom: -20px;
}

.padding-left_-20 {
  padding-left: -20px;
}

.padding-right_-20 {
  padding-right: -20px;
}

.margin-top_-20 {
  margin-top: -20px;
}

.margin-bottom_-20 {
  margin-top: -20px;
}

.margin-left_-20 {
  margin-left: -20px;
}

.margin-right_-20 {
  margin-right: -20px;
}

@media (max-width: 800px) {
  .padding-top-S_-20 {
    padding-top: -20px;
  }
  .padding-bottom-S_-20 {
    padding-top: -20px;
  }
  .padding-left-S_-20 {
    padding-left: -20px;
  }
  .padding-right-S_-20 {
    padding-right: -20px;
  }
  .margin-top-S_-20 {
    margin-top: -20px;
  }
  .margin-bottom-S_-20 {
    margin-top: -20px;
  }
  .margin-left-S_-20 {
    margin-left: -20px;
  }
  .margin-right-S_-20 {
    margin-right: -20px;
  }
}
.padding-top_-10 {
  padding-top: -10px;
}

.padding-bottom_-10 {
  padding-bottom: -10px;
}

.padding-left_-10 {
  padding-left: -10px;
}

.padding-right_-10 {
  padding-right: -10px;
}

.margin-top_-10 {
  margin-top: -10px;
}

.margin-bottom_-10 {
  margin-top: -10px;
}

.margin-left_-10 {
  margin-left: -10px;
}

.margin-right_-10 {
  margin-right: -10px;
}

@media (max-width: 800px) {
  .padding-top-S_-10 {
    padding-top: -10px;
  }
  .padding-bottom-S_-10 {
    padding-top: -10px;
  }
  .padding-left-S_-10 {
    padding-left: -10px;
  }
  .padding-right-S_-10 {
    padding-right: -10px;
  }
  .margin-top-S_-10 {
    margin-top: -10px;
  }
  .margin-bottom-S_-10 {
    margin-top: -10px;
  }
  .margin-left-S_-10 {
    margin-left: -10px;
  }
  .margin-right-S_-10 {
    margin-right: -10px;
  }
}
.padding-top_00 {
  padding-top: 00px;
}

.padding-bottom_00 {
  padding-bottom: 00px;
}

.padding-left_00 {
  padding-left: 00px;
}

.padding-right_00 {
  padding-right: 00px;
}

.margin-top_00 {
  margin-top: 00px;
}

.margin-bottom_00 {
  margin-top: 00px;
}

.margin-left_00 {
  margin-left: 00px;
}

.margin-right_00 {
  margin-right: 00px;
}

@media (max-width: 800px) {
  .padding-top-S_00 {
    padding-top: 00px;
  }
  .padding-bottom-S_00 {
    padding-top: 00px;
  }
  .padding-left-S_00 {
    padding-left: 00px;
  }
  .padding-right-S_00 {
    padding-right: 00px;
  }
  .margin-top-S_00 {
    margin-top: 00px;
  }
  .margin-bottom-S_00 {
    margin-top: 00px;
  }
  .margin-left-S_00 {
    margin-left: 00px;
  }
  .margin-right-S_00 {
    margin-right: 00px;
  }
}
.padding-top_10 {
  padding-top: 10px;
}

.padding-bottom_10 {
  padding-bottom: 10px;
}

.padding-left_10 {
  padding-left: 10px;
}

.padding-right_10 {
  padding-right: 10px;
}

.margin-top_10 {
  margin-top: 10px;
}

.margin-bottom_10 {
  margin-top: 10px;
}

.margin-left_10 {
  margin-left: 10px;
}

.margin-right_10 {
  margin-right: 10px;
}

@media (max-width: 800px) {
  .padding-top-S_10 {
    padding-top: 10px;
  }
  .padding-bottom-S_10 {
    padding-top: 10px;
  }
  .padding-left-S_10 {
    padding-left: 10px;
  }
  .padding-right-S_10 {
    padding-right: 10px;
  }
  .margin-top-S_10 {
    margin-top: 10px;
  }
  .margin-bottom-S_10 {
    margin-top: 10px;
  }
  .margin-left-S_10 {
    margin-left: 10px;
  }
  .margin-right-S_10 {
    margin-right: 10px;
  }
}
.padding-top_20 {
  padding-top: 20px;
}

.padding-bottom_20 {
  padding-bottom: 20px;
}

.padding-left_20 {
  padding-left: 20px;
}

.padding-right_20 {
  padding-right: 20px;
}

.margin-top_20 {
  margin-top: 20px;
}

.margin-bottom_20 {
  margin-top: 20px;
}

.margin-left_20 {
  margin-left: 20px;
}

.margin-right_20 {
  margin-right: 20px;
}

@media (max-width: 800px) {
  .padding-top-S_20 {
    padding-top: 20px;
  }
  .padding-bottom-S_20 {
    padding-top: 20px;
  }
  .padding-left-S_20 {
    padding-left: 20px;
  }
  .padding-right-S_20 {
    padding-right: 20px;
  }
  .margin-top-S_20 {
    margin-top: 20px;
  }
  .margin-bottom-S_20 {
    margin-top: 20px;
  }
  .margin-left-S_20 {
    margin-left: 20px;
  }
  .margin-right-S_20 {
    margin-right: 20px;
  }
}
.padding-top_30 {
  padding-top: 30px;
}

.padding-bottom_30 {
  padding-bottom: 30px;
}

.padding-left_30 {
  padding-left: 30px;
}

.padding-right_30 {
  padding-right: 30px;
}

.margin-top_30 {
  margin-top: 30px;
}

.margin-bottom_30 {
  margin-top: 30px;
}

.margin-left_30 {
  margin-left: 30px;
}

.margin-right_30 {
  margin-right: 30px;
}

@media (max-width: 800px) {
  .padding-top-S_30 {
    padding-top: 30px;
  }
  .padding-bottom-S_30 {
    padding-top: 30px;
  }
  .padding-left-S_30 {
    padding-left: 30px;
  }
  .padding-right-S_30 {
    padding-right: 30px;
  }
  .margin-top-S_30 {
    margin-top: 30px;
  }
  .margin-bottom-S_30 {
    margin-top: 30px;
  }
  .margin-left-S_30 {
    margin-left: 30px;
  }
  .margin-right-S_30 {
    margin-right: 30px;
  }
}
.padding-top_40 {
  padding-top: 40px;
}

.padding-bottom_40 {
  padding-bottom: 40px;
}

.padding-left_40 {
  padding-left: 40px;
}

.padding-right_40 {
  padding-right: 40px;
}

.margin-top_40 {
  margin-top: 40px;
}

.margin-bottom_40 {
  margin-top: 40px;
}

.margin-left_40 {
  margin-left: 40px;
}

.margin-right_40 {
  margin-right: 40px;
}

@media (max-width: 800px) {
  .padding-top-S_40 {
    padding-top: 40px;
  }
  .padding-bottom-S_40 {
    padding-top: 40px;
  }
  .padding-left-S_40 {
    padding-left: 40px;
  }
  .padding-right-S_40 {
    padding-right: 40px;
  }
  .margin-top-S_40 {
    margin-top: 40px;
  }
  .margin-bottom-S_40 {
    margin-top: 40px;
  }
  .margin-left-S_40 {
    margin-left: 40px;
  }
  .margin-right-S_40 {
    margin-right: 40px;
  }
}
.padding-top_50 {
  padding-top: 50px;
}

.padding-bottom_50 {
  padding-bottom: 50px;
}

.padding-left_50 {
  padding-left: 50px;
}

.padding-right_50 {
  padding-right: 50px;
}

.margin-top_50 {
  margin-top: 50px;
}

.margin-bottom_50 {
  margin-top: 50px;
}

.margin-left_50 {
  margin-left: 50px;
}

.margin-right_50 {
  margin-right: 50px;
}

@media (max-width: 800px) {
  .padding-top-S_50 {
    padding-top: 50px;
  }
  .padding-bottom-S_50 {
    padding-top: 50px;
  }
  .padding-left-S_50 {
    padding-left: 50px;
  }
  .padding-right-S_50 {
    padding-right: 50px;
  }
  .margin-top-S_50 {
    margin-top: 50px;
  }
  .margin-bottom-S_50 {
    margin-top: 50px;
  }
  .margin-left-S_50 {
    margin-left: 50px;
  }
  .margin-right-S_50 {
    margin-right: 50px;
  }
}
.padding-top_60 {
  padding-top: 60px;
}

.padding-bottom_60 {
  padding-bottom: 60px;
}

.padding-left_60 {
  padding-left: 60px;
}

.padding-right_60 {
  padding-right: 60px;
}

.margin-top_60 {
  margin-top: 60px;
}

.margin-bottom_60 {
  margin-top: 60px;
}

.margin-left_60 {
  margin-left: 60px;
}

.margin-right_60 {
  margin-right: 60px;
}

@media (max-width: 800px) {
  .padding-top-S_60 {
    padding-top: 60px;
  }
  .padding-bottom-S_60 {
    padding-top: 60px;
  }
  .padding-left-S_60 {
    padding-left: 60px;
  }
  .padding-right-S_60 {
    padding-right: 60px;
  }
  .margin-top-S_60 {
    margin-top: 60px;
  }
  .margin-bottom-S_60 {
    margin-top: 60px;
  }
  .margin-left-S_60 {
    margin-left: 60px;
  }
  .margin-right-S_60 {
    margin-right: 60px;
  }
}
.padding-top_70 {
  padding-top: 70px;
}

.padding-bottom_70 {
  padding-bottom: 70px;
}

.padding-left_70 {
  padding-left: 70px;
}

.padding-right_70 {
  padding-right: 70px;
}

.margin-top_70 {
  margin-top: 70px;
}

.margin-bottom_70 {
  margin-top: 70px;
}

.margin-left_70 {
  margin-left: 70px;
}

.margin-right_70 {
  margin-right: 70px;
}

@media (max-width: 800px) {
  .padding-top-S_70 {
    padding-top: 70px;
  }
  .padding-bottom-S_70 {
    padding-top: 70px;
  }
  .padding-left-S_70 {
    padding-left: 70px;
  }
  .padding-right-S_70 {
    padding-right: 70px;
  }
  .margin-top-S_70 {
    margin-top: 70px;
  }
  .margin-bottom-S_70 {
    margin-top: 70px;
  }
  .margin-left-S_70 {
    margin-left: 70px;
  }
  .margin-right-S_70 {
    margin-right: 70px;
  }
}
.padding-top_80 {
  padding-top: 80px;
}

.padding-bottom_80 {
  padding-bottom: 80px;
}

.padding-left_80 {
  padding-left: 80px;
}

.padding-right_80 {
  padding-right: 80px;
}

.margin-top_80 {
  margin-top: 80px;
}

.margin-bottom_80 {
  margin-top: 80px;
}

.margin-left_80 {
  margin-left: 80px;
}

.margin-right_80 {
  margin-right: 80px;
}

@media (max-width: 800px) {
  .padding-top-S_80 {
    padding-top: 80px;
  }
  .padding-bottom-S_80 {
    padding-top: 80px;
  }
  .padding-left-S_80 {
    padding-left: 80px;
  }
  .padding-right-S_80 {
    padding-right: 80px;
  }
  .margin-top-S_80 {
    margin-top: 80px;
  }
  .margin-bottom-S_80 {
    margin-top: 80px;
  }
  .margin-left-S_80 {
    margin-left: 80px;
  }
  .margin-right-S_80 {
    margin-right: 80px;
  }
}
.padding-top_90 {
  padding-top: 90px;
}

.padding-bottom_90 {
  padding-bottom: 90px;
}

.padding-left_90 {
  padding-left: 90px;
}

.padding-right_90 {
  padding-right: 90px;
}

.margin-top_90 {
  margin-top: 90px;
}

.margin-bottom_90 {
  margin-top: 90px;
}

.margin-left_90 {
  margin-left: 90px;
}

.margin-right_90 {
  margin-right: 90px;
}

@media (max-width: 800px) {
  .padding-top-S_90 {
    padding-top: 90px;
  }
  .padding-bottom-S_90 {
    padding-top: 90px;
  }
  .padding-left-S_90 {
    padding-left: 90px;
  }
  .padding-right-S_90 {
    padding-right: 90px;
  }
  .margin-top-S_90 {
    margin-top: 90px;
  }
  .margin-bottom-S_90 {
    margin-top: 90px;
  }
  .margin-left-S_90 {
    margin-left: 90px;
  }
  .margin-right-S_90 {
    margin-right: 90px;
  }
}
.padding-top_100 {
  padding-top: 100px;
}

.padding-bottom_100 {
  padding-bottom: 100px;
}

.padding-left_100 {
  padding-left: 100px;
}

.padding-right_100 {
  padding-right: 100px;
}

.margin-top_100 {
  margin-top: 100px;
}

.margin-bottom_100 {
  margin-top: 100px;
}

.margin-left_100 {
  margin-left: 100px;
}

.margin-right_100 {
  margin-right: 100px;
}

@media (max-width: 800px) {
  .padding-top-S_100 {
    padding-top: 100px;
  }
  .padding-bottom-S_100 {
    padding-top: 100px;
  }
  .padding-left-S_100 {
    padding-left: 100px;
  }
  .padding-right-S_100 {
    padding-right: 100px;
  }
  .margin-top-S_100 {
    margin-top: 100px;
  }
  .margin-bottom-S_100 {
    margin-top: 100px;
  }
  .margin-left-S_100 {
    margin-left: 100px;
  }
  .margin-right-S_100 {
    margin-right: 100px;
  }
}
.padding-top_110 {
  padding-top: 110px;
}

.padding-bottom_110 {
  padding-bottom: 110px;
}

.padding-left_110 {
  padding-left: 110px;
}

.padding-right_110 {
  padding-right: 110px;
}

.margin-top_110 {
  margin-top: 110px;
}

.margin-bottom_110 {
  margin-top: 110px;
}

.margin-left_110 {
  margin-left: 110px;
}

.margin-right_110 {
  margin-right: 110px;
}

@media (max-width: 800px) {
  .padding-top-S_110 {
    padding-top: 110px;
  }
  .padding-bottom-S_110 {
    padding-top: 110px;
  }
  .padding-left-S_110 {
    padding-left: 110px;
  }
  .padding-right-S_110 {
    padding-right: 110px;
  }
  .margin-top-S_110 {
    margin-top: 110px;
  }
  .margin-bottom-S_110 {
    margin-top: 110px;
  }
  .margin-left-S_110 {
    margin-left: 110px;
  }
  .margin-right-S_110 {
    margin-right: 110px;
  }
}
.padding-top_120 {
  padding-top: 120px;
}

.padding-bottom_120 {
  padding-bottom: 120px;
}

.padding-left_120 {
  padding-left: 120px;
}

.padding-right_120 {
  padding-right: 120px;
}

.margin-top_120 {
  margin-top: 120px;
}

.margin-bottom_120 {
  margin-top: 120px;
}

.margin-left_120 {
  margin-left: 120px;
}

.margin-right_120 {
  margin-right: 120px;
}

@media (max-width: 800px) {
  .padding-top-S_120 {
    padding-top: 120px;
  }
  .padding-bottom-S_120 {
    padding-top: 120px;
  }
  .padding-left-S_120 {
    padding-left: 120px;
  }
  .padding-right-S_120 {
    padding-right: 120px;
  }
  .margin-top-S_120 {
    margin-top: 120px;
  }
  .margin-bottom-S_120 {
    margin-top: 120px;
  }
  .margin-left-S_120 {
    margin-left: 120px;
  }
  .margin-right-S_120 {
    margin-right: 120px;
  }
}
.padding-top_130 {
  padding-top: 130px;
}

.padding-bottom_130 {
  padding-bottom: 130px;
}

.padding-left_130 {
  padding-left: 130px;
}

.padding-right_130 {
  padding-right: 130px;
}

.margin-top_130 {
  margin-top: 130px;
}

.margin-bottom_130 {
  margin-top: 130px;
}

.margin-left_130 {
  margin-left: 130px;
}

.margin-right_130 {
  margin-right: 130px;
}

@media (max-width: 800px) {
  .padding-top-S_130 {
    padding-top: 130px;
  }
  .padding-bottom-S_130 {
    padding-top: 130px;
  }
  .padding-left-S_130 {
    padding-left: 130px;
  }
  .padding-right-S_130 {
    padding-right: 130px;
  }
  .margin-top-S_130 {
    margin-top: 130px;
  }
  .margin-bottom-S_130 {
    margin-top: 130px;
  }
  .margin-left-S_130 {
    margin-left: 130px;
  }
  .margin-right-S_130 {
    margin-right: 130px;
  }
}
.padding-top_140 {
  padding-top: 140px;
}

.padding-bottom_140 {
  padding-bottom: 140px;
}

.padding-left_140 {
  padding-left: 140px;
}

.padding-right_140 {
  padding-right: 140px;
}

.margin-top_140 {
  margin-top: 140px;
}

.margin-bottom_140 {
  margin-top: 140px;
}

.margin-left_140 {
  margin-left: 140px;
}

.margin-right_140 {
  margin-right: 140px;
}

@media (max-width: 800px) {
  .padding-top-S_140 {
    padding-top: 140px;
  }
  .padding-bottom-S_140 {
    padding-top: 140px;
  }
  .padding-left-S_140 {
    padding-left: 140px;
  }
  .padding-right-S_140 {
    padding-right: 140px;
  }
  .margin-top-S_140 {
    margin-top: 140px;
  }
  .margin-bottom-S_140 {
    margin-top: 140px;
  }
  .margin-left-S_140 {
    margin-left: 140px;
  }
  .margin-right-S_140 {
    margin-right: 140px;
  }
}
.padding-top_150 {
  padding-top: 150px;
}

.padding-bottom_150 {
  padding-bottom: 150px;
}

.padding-left_150 {
  padding-left: 150px;
}

.padding-right_150 {
  padding-right: 150px;
}

.margin-top_150 {
  margin-top: 150px;
}

.margin-bottom_150 {
  margin-top: 150px;
}

.margin-left_150 {
  margin-left: 150px;
}

.margin-right_150 {
  margin-right: 150px;
}

@media (max-width: 800px) {
  .padding-top-S_150 {
    padding-top: 150px;
  }
  .padding-bottom-S_150 {
    padding-top: 150px;
  }
  .padding-left-S_150 {
    padding-left: 150px;
  }
  .padding-right-S_150 {
    padding-right: 150px;
  }
  .margin-top-S_150 {
    margin-top: 150px;
  }
  .margin-bottom-S_150 {
    margin-top: 150px;
  }
  .margin-left-S_150 {
    margin-left: 150px;
  }
  .margin-right-S_150 {
    margin-right: 150px;
  }
}
.padding-top_160 {
  padding-top: 160px;
}

.padding-bottom_160 {
  padding-bottom: 160px;
}

.padding-left_160 {
  padding-left: 160px;
}

.padding-right_160 {
  padding-right: 160px;
}

.margin-top_160 {
  margin-top: 160px;
}

.margin-bottom_160 {
  margin-top: 160px;
}

.margin-left_160 {
  margin-left: 160px;
}

.margin-right_160 {
  margin-right: 160px;
}

@media (max-width: 800px) {
  .padding-top-S_160 {
    padding-top: 160px;
  }
  .padding-bottom-S_160 {
    padding-top: 160px;
  }
  .padding-left-S_160 {
    padding-left: 160px;
  }
  .padding-right-S_160 {
    padding-right: 160px;
  }
  .margin-top-S_160 {
    margin-top: 160px;
  }
  .margin-bottom-S_160 {
    margin-top: 160px;
  }
  .margin-left-S_160 {
    margin-left: 160px;
  }
  .margin-right-S_160 {
    margin-right: 160px;
  }
}
.padding-top_170 {
  padding-top: 170px;
}

.padding-bottom_170 {
  padding-bottom: 170px;
}

.padding-left_170 {
  padding-left: 170px;
}

.padding-right_170 {
  padding-right: 170px;
}

.margin-top_170 {
  margin-top: 170px;
}

.margin-bottom_170 {
  margin-top: 170px;
}

.margin-left_170 {
  margin-left: 170px;
}

.margin-right_170 {
  margin-right: 170px;
}

@media (max-width: 800px) {
  .padding-top-S_170 {
    padding-top: 170px;
  }
  .padding-bottom-S_170 {
    padding-top: 170px;
  }
  .padding-left-S_170 {
    padding-left: 170px;
  }
  .padding-right-S_170 {
    padding-right: 170px;
  }
  .margin-top-S_170 {
    margin-top: 170px;
  }
  .margin-bottom-S_170 {
    margin-top: 170px;
  }
  .margin-left-S_170 {
    margin-left: 170px;
  }
  .margin-right-S_170 {
    margin-right: 170px;
  }
}
.padding-top_180 {
  padding-top: 180px;
}

.padding-bottom_180 {
  padding-bottom: 180px;
}

.padding-left_180 {
  padding-left: 180px;
}

.padding-right_180 {
  padding-right: 180px;
}

.margin-top_180 {
  margin-top: 180px;
}

.margin-bottom_180 {
  margin-top: 180px;
}

.margin-left_180 {
  margin-left: 180px;
}

.margin-right_180 {
  margin-right: 180px;
}

@media (max-width: 800px) {
  .padding-top-S_180 {
    padding-top: 180px;
  }
  .padding-bottom-S_180 {
    padding-top: 180px;
  }
  .padding-left-S_180 {
    padding-left: 180px;
  }
  .padding-right-S_180 {
    padding-right: 180px;
  }
  .margin-top-S_180 {
    margin-top: 180px;
  }
  .margin-bottom-S_180 {
    margin-top: 180px;
  }
  .margin-left-S_180 {
    margin-left: 180px;
  }
  .margin-right-S_180 {
    margin-right: 180px;
  }
}
.padding-top_190 {
  padding-top: 190px;
}

.padding-bottom_190 {
  padding-bottom: 190px;
}

.padding-left_190 {
  padding-left: 190px;
}

.padding-right_190 {
  padding-right: 190px;
}

.margin-top_190 {
  margin-top: 190px;
}

.margin-bottom_190 {
  margin-top: 190px;
}

.margin-left_190 {
  margin-left: 190px;
}

.margin-right_190 {
  margin-right: 190px;
}

@media (max-width: 800px) {
  .padding-top-S_190 {
    padding-top: 190px;
  }
  .padding-bottom-S_190 {
    padding-top: 190px;
  }
  .padding-left-S_190 {
    padding-left: 190px;
  }
  .padding-right-S_190 {
    padding-right: 190px;
  }
  .margin-top-S_190 {
    margin-top: 190px;
  }
  .margin-bottom-S_190 {
    margin-top: 190px;
  }
  .margin-left-S_190 {
    margin-left: 190px;
  }
  .margin-right-S_190 {
    margin-right: 190px;
  }
}
.padding-top_200 {
  padding-top: 200px;
}

.padding-bottom_200 {
  padding-bottom: 200px;
}

.padding-left_200 {
  padding-left: 200px;
}

.padding-right_200 {
  padding-right: 200px;
}

.margin-top_200 {
  margin-top: 200px;
}

.margin-bottom_200 {
  margin-top: 200px;
}

.margin-left_200 {
  margin-left: 200px;
}

.margin-right_200 {
  margin-right: 200px;
}

@media (max-width: 800px) {
  .padding-top-S_200 {
    padding-top: 200px;
  }
  .padding-bottom-S_200 {
    padding-top: 200px;
  }
  .padding-left-S_200 {
    padding-left: 200px;
  }
  .padding-right-S_200 {
    padding-right: 200px;
  }
  .margin-top-S_200 {
    margin-top: 200px;
  }
  .margin-bottom-S_200 {
    margin-top: 200px;
  }
  .margin-left-S_200 {
    margin-left: 200px;
  }
  .margin-right-S_200 {
    margin-right: 200px;
  }
}
.margin-top_-800 {
  margin-top: -800px;
}

.margin-top_-1000 {
  margin-top: -1000px;
}

.blendmode-Screen {
  mix-blend-mode: screen;
}

.text-center {
  text-align: center;
}

/* RESPONSIVE STYLES */
/* Ansicht für Tablets bzw. Bildschirme, die kleiner als 1160px sind */
@media screen and (max-width: 1160px) {
  /*body {
    background-color: #000040;
  }*/
  /* Alle Items die in der 1 Spalte angefangen haben starten nun in der 2 und sind dafür kürzer */
  *.col1-span1,
  *.col1-span1 > * {
    grid-column: 2/span calc(1 - 1);
  }
  *.col1-span2,
  *.col1-span2 > * {
    grid-column: 2/span calc(2 - 1);
  }
  *.col1-span3,
  *.col1-span3 > * {
    grid-column: 2/span calc(3 - 1);
  }
  *.col1-span4,
  *.col1-span4 > * {
    grid-column: 2/span calc(4 - 1);
  }
  *.col1-span5,
  *.col1-span5 > * {
    grid-column: 2/span calc(5 - 1);
  }
  *.col1-span6,
  *.col1-span6 > * {
    grid-column: 2/span calc(6 - 1);
  }
  *.col1-span7,
  *.col1-span7 > * {
    grid-column: 2/span calc(7 - 1);
  }
  *.col1-span8,
  *.col1-span8 > * {
    grid-column: 2/span calc(8 - 1);
  }
  *.col1-span9,
  *.col1-span9 > * {
    grid-column: 2/span calc(9 - 1);
  }
  *.col1-span10,
  *.col1-span10 > * {
    grid-column: 2/span calc(10 - 1);
  }
  *.col1-span11,
  *.col1-span11 > * {
    grid-column: 2/span calc(11 - 1);
  }
  *.col1-span12,
  *.col1-span12 > * {
    grid-column: 2/span calc(12 - 1);
  }
  /* Grid Layout Klassen für Tablet (M) */
  .col1-span1-M {
    grid-column: 1/span 1;
  }
  .col1-span2-M {
    grid-column: 1/span 2;
  }
  .col1-span3-M {
    grid-column: 1/span 3;
  }
  .col1-span4-M {
    grid-column: 1/span 4;
  }
  .col1-span5-M {
    grid-column: 1/span 5;
  }
  .col1-span6-M {
    grid-column: 1/span 6;
  }
  .col1-span7-M {
    grid-column: 1/span 7;
  }
  .col1-span8-M {
    grid-column: 1/span 8;
  }
  .col1-span9-M {
    grid-column: 1/span 9;
  }
  .col1-span10-M {
    grid-column: 1/span 10;
  }
  .col1-span11-M {
    grid-column: 1/span 11;
  }
  .col1-span12-M {
    grid-column: 1/span 12;
  }
  .col2-span1-M {
    grid-column: 2/span 1;
  }
  .col2-span2-M {
    grid-column: 2/span 2;
  }
  .col2-span3-M {
    grid-column: 2/span 3;
  }
  .col2-span4-M {
    grid-column: 2/span 4;
  }
  .col2-span5-M {
    grid-column: 2/span 5;
  }
  .col2-span6-M {
    grid-column: 2/span 6;
  }
  .col2-span7-M {
    grid-column: 2/span 7;
  }
  .col2-span8-M {
    grid-column: 2/span 8;
  }
  .col2-span9-M {
    grid-column: 2/span 9;
  }
  .col2-span10-M {
    grid-column: 2/span 10;
  }
  .col2-span11-M {
    grid-column: 2/span 11;
  }
  .col2-span12-M {
    grid-column: 2/span 12;
  }
  .col3-span1-M {
    grid-column: 3/span 1;
  }
  .col3-span2-M {
    grid-column: 3/span 2;
  }
  .col3-span3-M {
    grid-column: 3/span 3;
  }
  .col3-span4-M {
    grid-column: 3/span 4;
  }
  .col3-span5-M {
    grid-column: 3/span 5;
  }
  .col3-span6-M {
    grid-column: 3/span 6;
  }
  .col3-span7-M {
    grid-column: 3/span 7;
  }
  .col3-span8-M {
    grid-column: 3/span 8;
  }
  .col3-span9-M {
    grid-column: 3/span 9;
  }
  .col3-span10-M {
    grid-column: 3/span 10;
  }
  .col3-span11-M {
    grid-column: 3/span 11;
  }
  .col3-span12-M {
    grid-column: 3/span 12;
  }
  .col4-span1-M {
    grid-column: 4/span 1;
  }
  .col4-span2-M {
    grid-column: 4/span 2;
  }
  .col4-span3-M {
    grid-column: 4/span 3;
  }
  .col4-span4-M {
    grid-column: 4/span 4;
  }
  .col4-span5-M {
    grid-column: 4/span 5;
  }
  .col4-span6-M {
    grid-column: 4/span 6;
  }
  .col4-span7-M {
    grid-column: 4/span 7;
  }
  .col4-span8-M {
    grid-column: 4/span 8;
  }
  .col4-span9-M {
    grid-column: 4/span 9;
  }
  .col4-span10-M {
    grid-column: 4/span 10;
  }
  .col4-span11-M {
    grid-column: 4/span 11;
  }
  .col4-span12-M {
    grid-column: 4/span 12;
  }
  .col5-span1-M {
    grid-column: 5/span 1;
  }
  .col5-span2-M {
    grid-column: 5/span 2;
  }
  .col5-span3-M {
    grid-column: 5/span 3;
  }
  .col5-span4-M {
    grid-column: 5/span 4;
  }
  .col5-span5-M {
    grid-column: 5/span 5;
  }
  .col5-span6-M {
    grid-column: 5/span 6;
  }
  .col5-span7-M {
    grid-column: 5/span 7;
  }
  .col5-span8-M {
    grid-column: 5/span 8;
  }
  .col5-span9-M {
    grid-column: 5/span 9;
  }
  .col5-span10-M {
    grid-column: 5/span 10;
  }
  .col5-span11-M {
    grid-column: 5/span 11;
  }
  .col5-span12-M {
    grid-column: 5/span 12;
  }
  .col6-span1-M {
    grid-column: 6/span 1;
  }
  .col6-span2-M {
    grid-column: 6/span 2;
  }
  .col6-span3-M {
    grid-column: 6/span 3;
  }
  .col6-span4-M {
    grid-column: 6/span 4;
  }
  .col6-span5-M {
    grid-column: 6/span 5;
  }
  .col6-span6-M {
    grid-column: 6/span 6;
  }
  .col6-span7-M {
    grid-column: 6/span 7;
  }
  .col6-span8-M {
    grid-column: 6/span 8;
  }
  .col6-span9-M {
    grid-column: 6/span 9;
  }
  .col6-span10-M {
    grid-column: 6/span 10;
  }
  .col6-span11-M {
    grid-column: 6/span 11;
  }
  .col6-span12-M {
    grid-column: 6/span 12;
  }
  .col7-span1-M {
    grid-column: 7/span 1;
  }
  .col7-span2-M {
    grid-column: 7/span 2;
  }
  .col7-span3-M {
    grid-column: 7/span 3;
  }
  .col7-span4-M {
    grid-column: 7/span 4;
  }
  .col7-span5-M {
    grid-column: 7/span 5;
  }
  .col7-span6-M {
    grid-column: 7/span 6;
  }
  .col7-span7-M {
    grid-column: 7/span 7;
  }
  .col7-span8-M {
    grid-column: 7/span 8;
  }
  .col7-span9-M {
    grid-column: 7/span 9;
  }
  .col7-span10-M {
    grid-column: 7/span 10;
  }
  .col7-span11-M {
    grid-column: 7/span 11;
  }
  .col7-span12-M {
    grid-column: 7/span 12;
  }
  .col8-span1-M {
    grid-column: 8/span 1;
  }
  .col8-span2-M {
    grid-column: 8/span 2;
  }
  .col8-span3-M {
    grid-column: 8/span 3;
  }
  .col8-span4-M {
    grid-column: 8/span 4;
  }
  .col8-span5-M {
    grid-column: 8/span 5;
  }
  .col8-span6-M {
    grid-column: 8/span 6;
  }
  .col8-span7-M {
    grid-column: 8/span 7;
  }
  .col8-span8-M {
    grid-column: 8/span 8;
  }
  .col8-span9-M {
    grid-column: 8/span 9;
  }
  .col8-span10-M {
    grid-column: 8/span 10;
  }
  .col8-span11-M {
    grid-column: 8/span 11;
  }
  .col8-span12-M {
    grid-column: 8/span 12;
  }
  .col9-span1-M {
    grid-column: 9/span 1;
  }
  .col9-span2-M {
    grid-column: 9/span 2;
  }
  .col9-span3-M {
    grid-column: 9/span 3;
  }
  .col9-span4-M {
    grid-column: 9/span 4;
  }
  .col9-span5-M {
    grid-column: 9/span 5;
  }
  .col9-span6-M {
    grid-column: 9/span 6;
  }
  .col9-span7-M {
    grid-column: 9/span 7;
  }
  .col9-span8-M {
    grid-column: 9/span 8;
  }
  .col9-span9-M {
    grid-column: 9/span 9;
  }
  .col9-span10-M {
    grid-column: 9/span 10;
  }
  .col9-span11-M {
    grid-column: 9/span 11;
  }
  .col9-span12-M {
    grid-column: 9/span 12;
  }
  .col10-span1-M {
    grid-column: 10/span 1;
  }
  .col10-span2-M {
    grid-column: 10/span 2;
  }
  .col10-span3-M {
    grid-column: 10/span 3;
  }
  .col10-span4-M {
    grid-column: 10/span 4;
  }
  .col10-span5-M {
    grid-column: 10/span 5;
  }
  .col10-span6-M {
    grid-column: 10/span 6;
  }
  .col10-span7-M {
    grid-column: 10/span 7;
  }
  .col10-span8-M {
    grid-column: 10/span 8;
  }
  .col10-span9-M {
    grid-column: 10/span 9;
  }
  .col10-span10-M {
    grid-column: 10/span 10;
  }
  .col10-span11-M {
    grid-column: 10/span 11;
  }
  .col10-span12-M {
    grid-column: 10/span 12;
  }
  .col11-span1-M {
    grid-column: 11/span 1;
  }
  .col11-span2-M {
    grid-column: 11/span 2;
  }
  .col11-span3-M {
    grid-column: 11/span 3;
  }
  .col11-span4-M {
    grid-column: 11/span 4;
  }
  .col11-span5-M {
    grid-column: 11/span 5;
  }
  .col11-span6-M {
    grid-column: 11/span 6;
  }
  .col11-span7-M {
    grid-column: 11/span 7;
  }
  .col11-span8-M {
    grid-column: 11/span 8;
  }
  .col11-span9-M {
    grid-column: 11/span 9;
  }
  .col11-span10-M {
    grid-column: 11/span 10;
  }
  .col11-span11-M {
    grid-column: 11/span 11;
  }
  .col11-span12-M {
    grid-column: 11/span 12;
  }
  .col12-span1-M {
    grid-column: 12/span 1;
  }
  .col12-span2-M {
    grid-column: 12/span 2;
  }
  .col12-span3-M {
    grid-column: 12/span 3;
  }
  .col12-span4-M {
    grid-column: 12/span 4;
  }
  .col12-span5-M {
    grid-column: 12/span 5;
  }
  .col12-span6-M {
    grid-column: 12/span 6;
  }
  .col12-span7-M {
    grid-column: 12/span 7;
  }
  .col12-span8-M {
    grid-column: 12/span 8;
  }
  .col12-span9-M {
    grid-column: 12/span 9;
  }
  .col12-span10-M {
    grid-column: 12/span 10;
  }
  .col12-span11-M {
    grid-column: 12/span 11;
  }
  .col12-span12-M {
    grid-column: 12/span 12;
  }
  .ditachedLogo {
    padding-left: 16px;
  }
  .menu .dropdown {
    margin: 0;
    padding: 0px 16px;
  }
}
/* Ansicht für Smartphones bzw. Bildschirme, die kleiner als 800px sind */
@media screen and (max-width: 800px) {
  /*body {
    background-color: #300000;
  }*/
  /* Desktop Grid Layout Klassen sind auf mobile immer 2-12 breit */
  .col1-span1 {
    grid-column: 2/12;
  }
  .col1-span2 {
    grid-column: 2/12;
  }
  .col1-span3 {
    grid-column: 2/12;
  }
  .col1-span4 {
    grid-column: 2/12;
  }
  .col1-span5 {
    grid-column: 2/12;
  }
  .col1-span6 {
    grid-column: 2/12;
  }
  .col1-span7 {
    grid-column: 2/12;
  }
  .col1-span8 {
    grid-column: 2/12;
  }
  .col1-span9 {
    grid-column: 2/12;
  }
  .col1-span10 {
    grid-column: 2/12;
  }
  .col1-span11 {
    grid-column: 2/12;
  }
  .col1-span12 {
    grid-column: 2/12;
  }
  .col2-span1 {
    grid-column: 2/12;
  }
  .col2-span2 {
    grid-column: 2/12;
  }
  .col2-span3 {
    grid-column: 2/12;
  }
  .col2-span4 {
    grid-column: 2/12;
  }
  .col2-span5 {
    grid-column: 2/12;
  }
  .col2-span6 {
    grid-column: 2/12;
  }
  .col2-span7 {
    grid-column: 2/12;
  }
  .col2-span8 {
    grid-column: 2/12;
  }
  .col2-span9 {
    grid-column: 2/12;
  }
  .col2-span10 {
    grid-column: 2/12;
  }
  .col2-span11 {
    grid-column: 2/12;
  }
  .col2-span12 {
    grid-column: 2/12;
  }
  .col3-span1 {
    grid-column: 2/12;
  }
  .col3-span2 {
    grid-column: 2/12;
  }
  .col3-span3 {
    grid-column: 2/12;
  }
  .col3-span4 {
    grid-column: 2/12;
  }
  .col3-span5 {
    grid-column: 2/12;
  }
  .col3-span6 {
    grid-column: 2/12;
  }
  .col3-span7 {
    grid-column: 2/12;
  }
  .col3-span8 {
    grid-column: 2/12;
  }
  .col3-span9 {
    grid-column: 2/12;
  }
  .col3-span10 {
    grid-column: 2/12;
  }
  .col3-span11 {
    grid-column: 2/12;
  }
  .col3-span12 {
    grid-column: 2/12;
  }
  .col4-span1 {
    grid-column: 2/12;
  }
  .col4-span2 {
    grid-column: 2/12;
  }
  .col4-span3 {
    grid-column: 2/12;
  }
  .col4-span4 {
    grid-column: 2/12;
  }
  .col4-span5 {
    grid-column: 2/12;
  }
  .col4-span6 {
    grid-column: 2/12;
  }
  .col4-span7 {
    grid-column: 2/12;
  }
  .col4-span8 {
    grid-column: 2/12;
  }
  .col4-span9 {
    grid-column: 2/12;
  }
  .col4-span10 {
    grid-column: 2/12;
  }
  .col4-span11 {
    grid-column: 2/12;
  }
  .col4-span12 {
    grid-column: 2/12;
  }
  .col5-span1 {
    grid-column: 2/12;
  }
  .col5-span2 {
    grid-column: 2/12;
  }
  .col5-span3 {
    grid-column: 2/12;
  }
  .col5-span4 {
    grid-column: 2/12;
  }
  .col5-span5 {
    grid-column: 2/12;
  }
  .col5-span6 {
    grid-column: 2/12;
  }
  .col5-span7 {
    grid-column: 2/12;
  }
  .col5-span8 {
    grid-column: 2/12;
  }
  .col5-span9 {
    grid-column: 2/12;
  }
  .col5-span10 {
    grid-column: 2/12;
  }
  .col5-span11 {
    grid-column: 2/12;
  }
  .col5-span12 {
    grid-column: 2/12;
  }
  .col6-span1 {
    grid-column: 2/12;
  }
  .col6-span2 {
    grid-column: 2/12;
  }
  .col6-span3 {
    grid-column: 2/12;
  }
  .col6-span4 {
    grid-column: 2/12;
  }
  .col6-span5 {
    grid-column: 2/12;
  }
  .col6-span6 {
    grid-column: 2/12;
  }
  .col6-span7 {
    grid-column: 2/12;
  }
  .col6-span8 {
    grid-column: 2/12;
  }
  .col6-span9 {
    grid-column: 2/12;
  }
  .col6-span10 {
    grid-column: 2/12;
  }
  .col6-span11 {
    grid-column: 2/12;
  }
  .col6-span12 {
    grid-column: 2/12;
  }
  .col7-span1 {
    grid-column: 2/12;
  }
  .col7-span2 {
    grid-column: 2/12;
  }
  .col7-span3 {
    grid-column: 2/12;
  }
  .col7-span4 {
    grid-column: 2/12;
  }
  .col7-span5 {
    grid-column: 2/12;
  }
  .col7-span6 {
    grid-column: 2/12;
  }
  .col7-span7 {
    grid-column: 2/12;
  }
  .col7-span8 {
    grid-column: 2/12;
  }
  .col7-span9 {
    grid-column: 2/12;
  }
  .col7-span10 {
    grid-column: 2/12;
  }
  .col7-span11 {
    grid-column: 2/12;
  }
  .col7-span12 {
    grid-column: 2/12;
  }
  .col8-span1 {
    grid-column: 2/12;
  }
  .col8-span2 {
    grid-column: 2/12;
  }
  .col8-span3 {
    grid-column: 2/12;
  }
  .col8-span4 {
    grid-column: 2/12;
  }
  .col8-span5 {
    grid-column: 2/12;
  }
  .col8-span6 {
    grid-column: 2/12;
  }
  .col8-span7 {
    grid-column: 2/12;
  }
  .col8-span8 {
    grid-column: 2/12;
  }
  .col8-span9 {
    grid-column: 2/12;
  }
  .col8-span10 {
    grid-column: 2/12;
  }
  .col8-span11 {
    grid-column: 2/12;
  }
  .col8-span12 {
    grid-column: 2/12;
  }
  .col9-span1 {
    grid-column: 2/12;
  }
  .col9-span2 {
    grid-column: 2/12;
  }
  .col9-span3 {
    grid-column: 2/12;
  }
  .col9-span4 {
    grid-column: 2/12;
  }
  .col9-span5 {
    grid-column: 2/12;
  }
  .col9-span6 {
    grid-column: 2/12;
  }
  .col9-span7 {
    grid-column: 2/12;
  }
  .col9-span8 {
    grid-column: 2/12;
  }
  .col9-span9 {
    grid-column: 2/12;
  }
  .col9-span10 {
    grid-column: 2/12;
  }
  .col9-span11 {
    grid-column: 2/12;
  }
  .col9-span12 {
    grid-column: 2/12;
  }
  .col10-span1 {
    grid-column: 2/12;
  }
  .col10-span2 {
    grid-column: 2/12;
  }
  .col10-span3 {
    grid-column: 2/12;
  }
  .col10-span4 {
    grid-column: 2/12;
  }
  .col10-span5 {
    grid-column: 2/12;
  }
  .col10-span6 {
    grid-column: 2/12;
  }
  .col10-span7 {
    grid-column: 2/12;
  }
  .col10-span8 {
    grid-column: 2/12;
  }
  .col10-span9 {
    grid-column: 2/12;
  }
  .col10-span10 {
    grid-column: 2/12;
  }
  .col10-span11 {
    grid-column: 2/12;
  }
  .col10-span12 {
    grid-column: 2/12;
  }
  .col11-span1 {
    grid-column: 2/12;
  }
  .col11-span2 {
    grid-column: 2/12;
  }
  .col11-span3 {
    grid-column: 2/12;
  }
  .col11-span4 {
    grid-column: 2/12;
  }
  .col11-span5 {
    grid-column: 2/12;
  }
  .col11-span6 {
    grid-column: 2/12;
  }
  .col11-span7 {
    grid-column: 2/12;
  }
  .col11-span8 {
    grid-column: 2/12;
  }
  .col11-span9 {
    grid-column: 2/12;
  }
  .col11-span10 {
    grid-column: 2/12;
  }
  .col11-span11 {
    grid-column: 2/12;
  }
  .col11-span12 {
    grid-column: 2/12;
  }
  .col12-span1 {
    grid-column: 2/12;
  }
  .col12-span2 {
    grid-column: 2/12;
  }
  .col12-span3 {
    grid-column: 2/12;
  }
  .col12-span4 {
    grid-column: 2/12;
  }
  .col12-span5 {
    grid-column: 2/12;
  }
  .col12-span6 {
    grid-column: 2/12;
  }
  .col12-span7 {
    grid-column: 2/12;
  }
  .col12-span8 {
    grid-column: 2/12;
  }
  .col12-span9 {
    grid-column: 2/12;
  }
  .col12-span10 {
    grid-column: 2/12;
  }
  .col12-span11 {
    grid-column: 2/12;
  }
  .col12-span12 {
    grid-column: 2/12;
  }
  /* Grid Layout Klassen für Smartphone (S) */
  .col1-span1-S {
    grid-column: 1/span 1;
  }
  .col1-span2-S {
    grid-column: 1/span 2;
  }
  .col1-span3-S {
    grid-column: 1/span 3;
  }
  .col1-span4-S {
    grid-column: 1/span 4;
  }
  .col1-span5-S {
    grid-column: 1/span 5;
  }
  .col1-span6-S {
    grid-column: 1/span 6;
  }
  .col1-span7-S {
    grid-column: 1/span 7;
  }
  .col1-span8-S {
    grid-column: 1/span 8;
  }
  .col1-span9-S {
    grid-column: 1/span 9;
  }
  .col1-span10-S {
    grid-column: 1/span 10;
  }
  .col1-span11-S {
    grid-column: 1/span 11;
  }
  .col1-span12-S {
    grid-column: 1/span 12;
  }
  .col2-span1-S {
    grid-column: 2/span 1;
  }
  .col2-span2-S {
    grid-column: 2/span 2;
  }
  .col2-span3-S {
    grid-column: 2/span 3;
  }
  .col2-span4-S {
    grid-column: 2/span 4;
  }
  .col2-span5-S {
    grid-column: 2/span 5;
  }
  .col2-span6-S {
    grid-column: 2/span 6;
  }
  .col2-span7-S {
    grid-column: 2/span 7;
  }
  .col2-span8-S {
    grid-column: 2/span 8;
  }
  .col2-span9-S {
    grid-column: 2/span 9;
  }
  .col2-span10-S {
    grid-column: 2/span 10;
  }
  .col2-span11-S {
    grid-column: 2/span 11;
  }
  .col2-span12-S {
    grid-column: 2/span 12;
  }
  .col3-span1-S {
    grid-column: 3/span 1;
  }
  .col3-span2-S {
    grid-column: 3/span 2;
  }
  .col3-span3-S {
    grid-column: 3/span 3;
  }
  .col3-span4-S {
    grid-column: 3/span 4;
  }
  .col3-span5-S {
    grid-column: 3/span 5;
  }
  .col3-span6-S {
    grid-column: 3/span 6;
  }
  .col3-span7-S {
    grid-column: 3/span 7;
  }
  .col3-span8-S {
    grid-column: 3/span 8;
  }
  .col3-span9-S {
    grid-column: 3/span 9;
  }
  .col3-span10-S {
    grid-column: 3/span 10;
  }
  .col3-span11-S {
    grid-column: 3/span 11;
  }
  .col3-span12-S {
    grid-column: 3/span 12;
  }
  .col4-span1-S {
    grid-column: 4/span 1;
  }
  .col4-span2-S {
    grid-column: 4/span 2;
  }
  .col4-span3-S {
    grid-column: 4/span 3;
  }
  .col4-span4-S {
    grid-column: 4/span 4;
  }
  .col4-span5-S {
    grid-column: 4/span 5;
  }
  .col4-span6-S {
    grid-column: 4/span 6;
  }
  .col4-span7-S {
    grid-column: 4/span 7;
  }
  .col4-span8-S {
    grid-column: 4/span 8;
  }
  .col4-span9-S {
    grid-column: 4/span 9;
  }
  .col4-span10-S {
    grid-column: 4/span 10;
  }
  .col4-span11-S {
    grid-column: 4/span 11;
  }
  .col4-span12-S {
    grid-column: 4/span 12;
  }
  .col5-span1-S {
    grid-column: 5/span 1;
  }
  .col5-span2-S {
    grid-column: 5/span 2;
  }
  .col5-span3-S {
    grid-column: 5/span 3;
  }
  .col5-span4-S {
    grid-column: 5/span 4;
  }
  .col5-span5-S {
    grid-column: 5/span 5;
  }
  .col5-span6-S {
    grid-column: 5/span 6;
  }
  .col5-span7-S {
    grid-column: 5/span 7;
  }
  .col5-span8-S {
    grid-column: 5/span 8;
  }
  .col5-span9-S {
    grid-column: 5/span 9;
  }
  .col5-span10-S {
    grid-column: 5/span 10;
  }
  .col5-span11-S {
    grid-column: 5/span 11;
  }
  .col5-span12-S {
    grid-column: 5/span 12;
  }
  .col6-span1-S {
    grid-column: 6/span 1;
  }
  .col6-span2-S {
    grid-column: 6/span 2;
  }
  .col6-span3-S {
    grid-column: 6/span 3;
  }
  .col6-span4-S {
    grid-column: 6/span 4;
  }
  .col6-span5-S {
    grid-column: 6/span 5;
  }
  .col6-span6-S {
    grid-column: 6/span 6;
  }
  .col6-span7-S {
    grid-column: 6/span 7;
  }
  .col6-span8-S {
    grid-column: 6/span 8;
  }
  .col6-span9-S {
    grid-column: 6/span 9;
  }
  .col6-span10-S {
    grid-column: 6/span 10;
  }
  .col6-span11-S {
    grid-column: 6/span 11;
  }
  .col6-span12-S {
    grid-column: 6/span 12;
  }
  .col7-span1-S {
    grid-column: 7/span 1;
  }
  .col7-span2-S {
    grid-column: 7/span 2;
  }
  .col7-span3-S {
    grid-column: 7/span 3;
  }
  .col7-span4-S {
    grid-column: 7/span 4;
  }
  .col7-span5-S {
    grid-column: 7/span 5;
  }
  .col7-span6-S {
    grid-column: 7/span 6;
  }
  .col7-span7-S {
    grid-column: 7/span 7;
  }
  .col7-span8-S {
    grid-column: 7/span 8;
  }
  .col7-span9-S {
    grid-column: 7/span 9;
  }
  .col7-span10-S {
    grid-column: 7/span 10;
  }
  .col7-span11-S {
    grid-column: 7/span 11;
  }
  .col7-span12-S {
    grid-column: 7/span 12;
  }
  .col8-span1-S {
    grid-column: 8/span 1;
  }
  .col8-span2-S {
    grid-column: 8/span 2;
  }
  .col8-span3-S {
    grid-column: 8/span 3;
  }
  .col8-span4-S {
    grid-column: 8/span 4;
  }
  .col8-span5-S {
    grid-column: 8/span 5;
  }
  .col8-span6-S {
    grid-column: 8/span 6;
  }
  .col8-span7-S {
    grid-column: 8/span 7;
  }
  .col8-span8-S {
    grid-column: 8/span 8;
  }
  .col8-span9-S {
    grid-column: 8/span 9;
  }
  .col8-span10-S {
    grid-column: 8/span 10;
  }
  .col8-span11-S {
    grid-column: 8/span 11;
  }
  .col8-span12-S {
    grid-column: 8/span 12;
  }
  .col9-span1-S {
    grid-column: 9/span 1;
  }
  .col9-span2-S {
    grid-column: 9/span 2;
  }
  .col9-span3-S {
    grid-column: 9/span 3;
  }
  .col9-span4-S {
    grid-column: 9/span 4;
  }
  .col9-span5-S {
    grid-column: 9/span 5;
  }
  .col9-span6-S {
    grid-column: 9/span 6;
  }
  .col9-span7-S {
    grid-column: 9/span 7;
  }
  .col9-span8-S {
    grid-column: 9/span 8;
  }
  .col9-span9-S {
    grid-column: 9/span 9;
  }
  .col9-span10-S {
    grid-column: 9/span 10;
  }
  .col9-span11-S {
    grid-column: 9/span 11;
  }
  .col9-span12-S {
    grid-column: 9/span 12;
  }
  .col10-span1-S {
    grid-column: 10/span 1;
  }
  .col10-span2-S {
    grid-column: 10/span 2;
  }
  .col10-span3-S {
    grid-column: 10/span 3;
  }
  .col10-span4-S {
    grid-column: 10/span 4;
  }
  .col10-span5-S {
    grid-column: 10/span 5;
  }
  .col10-span6-S {
    grid-column: 10/span 6;
  }
  .col10-span7-S {
    grid-column: 10/span 7;
  }
  .col10-span8-S {
    grid-column: 10/span 8;
  }
  .col10-span9-S {
    grid-column: 10/span 9;
  }
  .col10-span10-S {
    grid-column: 10/span 10;
  }
  .col10-span11-S {
    grid-column: 10/span 11;
  }
  .col10-span12-S {
    grid-column: 10/span 12;
  }
  .col11-span1-S {
    grid-column: 11/span 1;
  }
  .col11-span2-S {
    grid-column: 11/span 2;
  }
  .col11-span3-S {
    grid-column: 11/span 3;
  }
  .col11-span4-S {
    grid-column: 11/span 4;
  }
  .col11-span5-S {
    grid-column: 11/span 5;
  }
  .col11-span6-S {
    grid-column: 11/span 6;
  }
  .col11-span7-S {
    grid-column: 11/span 7;
  }
  .col11-span8-S {
    grid-column: 11/span 8;
  }
  .col11-span9-S {
    grid-column: 11/span 9;
  }
  .col11-span10-S {
    grid-column: 11/span 10;
  }
  .col11-span11-S {
    grid-column: 11/span 11;
  }
  .col11-span12-S {
    grid-column: 11/span 12;
  }
  .col12-span1-S {
    grid-column: 12/span 1;
  }
  .col12-span2-S {
    grid-column: 12/span 2;
  }
  .col12-span3-S {
    grid-column: 12/span 3;
  }
  .col12-span4-S {
    grid-column: 12/span 4;
  }
  .col12-span5-S {
    grid-column: 12/span 5;
  }
  .col12-span6-S {
    grid-column: 12/span 6;
  }
  .col12-span7-S {
    grid-column: 12/span 7;
  }
  .col12-span8-S {
    grid-column: 12/span 8;
  }
  .col12-span9-S {
    grid-column: 12/span 9;
  }
  .col12-span10-S {
    grid-column: 12/span 10;
  }
  .col12-span11-S {
    grid-column: 12/span 11;
  }
  .col12-span12-S {
    grid-column: 12/span 12;
  }
  h1 {
    font-size: 28px;
    line-height: 35px;
    margin: 14px 0px;
  }
  h2 {
    font-size: 28px;
    line-height: 35px;
    margin: 14px 0px;
  }
  h3 {
    font-size: 20px;
    line-height: 28px;
    margin: 14px 0px;
  }
  h4 {
    font-size: 18px;
    line-height: 26px;
    margin: 14px 0px;
  }
  p {
    font-size: 16px;
    line-height: 24px;
  }
  .btnLarge {
    font-size: 18px;
    padding: 30px 0px;
    margin: 30px 0px;
  }
  .navBar .ditachedLogo {
    z-index: 1000;
  }
  .navBar .menu .dropdown {
    margin: 0;
    padding: 0px 16px;
  }
  .navBar .menu .dropdown ul {
    padding: 0;
  }
  .hideOnMobile {
    display: none !important;
  }
  .scroll {
    color: transparent;
  }
  .logoParade {
    height: 60px;
  }
  .services li:before {
    font-size: 16px;
    line-height: 30px;
    color: white;
    opacity: 0.3;
    margin-left: -36px;
  }
  .services .arrowContainer {
    display: none;
    /*
    position: absolute;
    right: 0;
    margin-top: -110px;
    width: 200px;
    z-index: -100;
    .arrowContent {
      z-index: -100;
      span {
        display: none;
      }
    }
    */
  }
  .services #video-angebot {
    width: 100% !important;
  }
  .shuffleBtnMobile {
    position: absolute !important;
    left: 0;
    right: 0;
    margin-left: auto !important;
    margin-right: auto !important;
    bottom: 30px;
  }
}
.gradient-text-logo {
  /* Fallback: Set a background color. */
  background-color: #fa160f;
  /* Create the gradient. */
  background-image: linear-gradient(60deg, #ffffff 0%, #ffffff 83.333%);
  /* Set the background size and repeat properties. */
  background-size: 1%;
  background-repeat: no-repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Animate the text when loading the element. */
  /* This animates it on page load and when hovering out. */
  animation: rainbow-text-simple-animation 0.5s ease forwards;
}
@media (max-width: 800px) {
  .gradient-text-logo {
    display: none;
  }
}

.ditachedLogo:hover .gradient-text-logo {
  animation: rainbow-text-simple-animation-rev 0.4s ease forwards;
  background-image: linear-gradient(60deg, #ffffff 5%, #1a46ed 20%, #1a46ed 20%, #fa160f 100%);
  background-position-x: -20px;
}
.ditachedLogo:hover a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.gradient-text-logo:hover {
  animation: rainbow-text-simple-animation-rev 0.4s ease forwards;
  background-image: linear-gradient(60deg, #ffffff 5%, #1a46ed 20%, #1a46ed 20%, #fa160f 100%);
  background-position-x: -20px;
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-simple-animation-rev {
  0% {
    background-size: 650%;
  }
  40% {
    background-size: 650%;
  }
  100% {
    background-size: 100%;
  }
}
/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-simple-animation {
  0% {
    background-size: 100%;
  }
  80% {
    background-size: 650%;
  }
  100% {
    background-size: 650%;
  }
}
@media (max-width: 800px) {
  .changeOrderOnMobile {
    display: flex;
    flex-flow: column;
    width: 80%;
  }
}

@media (max-width: 800px) {
  .orderOnMobile-1 {
    order: 1;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-2 {
    order: 2;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-3 {
    order: 3;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-4 {
    order: 4;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-5 {
    order: 5;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-6 {
    order: 6;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-7 {
    order: 7;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-8 {
    order: 8;
  }
}
@media (max-width: 800px) {
  .orderOnMobile-9 {
    order: 9;
  }
}
.contain {
  object-fit: contain !important;
}

.noUnderline::after {
  display: none;
}

.noise-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../Assets/noise.png");
  opacity: 0.75;
  -webkit-animation: noise 0.09s infinite;
  animation: noise 0.09s infinite;
  pointer-events: none;
}

@-webkit-keyframes noise {
  0%, to {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}
@keyframes noise {
  0%, to {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}
.overflowX-hidden {
  overflow-x: hidden;
}

#headerAboutUs {
  width: 100%;
  max-width: 1920px;
}

#ditachedVideo {
  border-radius: 20px;
  height: content;
  width: 100% !important;
}
@media (max-width: 800px) {
  #ditachedVideo {
    margin-top: 70px;
    height: 60vh;
    width: fit-content;
    object-fit: cover;
  }
}

#ditachedAboutUs {
  padding-top: 110px;
}

.gameboy-font {
  font-family: amboy-black, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.searchbar {
  margin-bottom: 50px;
}

.playgroundheader {
  width: 100%;
  z-index: 101;
}
.playgroundheader h4, .playgroundheader p {
  text-align: center;
}
@media (max-width: 800px) {
  .playgroundheader h4 {
    margin-top: 30px;
  }
}
@media (max-width: 800px) {
  .playgroundheader p {
    padding-bottom: 30px;
  }
}

.playgroundtags {
  display: none;
}

.playgroundraster {
  width: 100%;
  max-width: 2700px;
  padding-top: 75px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 75px;
  justify-content: space-around;
  width: 100%;
  max-width: 2800px;
  padding-top: 75px;
  padding-left: 15px;
  padding-right: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  row-gap: 21px;
  -ms-flex-pack: distribute;
  justify-content: center;
}

#unity3D-logo {
  right: 20vw;
  top: 50vh;
  width: 250px;
}
@media (max-width: 1400px) {
  #unity3D-logo {
    filter: blur(25px);
  }
}

#ps4-controller {
  width: 450px;
  right: 66vw;
  top: 130vh;
}
@media (max-width: 1400px) {
  #ps4-controller {
    filter: blur(25px);
  }
}

#arcade3d {
  width: 350px;
  left: 12vw;
  top: 28vh;
}
@media (max-width: 1400px) {
  #arcade3d {
    filter: blur(25px);
  }
}

#blender3D-logo {
  width: 350px;
  left: 10vw;
  top: 65vh;
}
@media (max-width: 1400px) {
  #blender3D-logo {
    filter: blur(25px);
  }
}

#joyconLinksP {
  left: 18vw;
  top: 45vh;
}
@media (max-width: 1400px) {
  #joyconLinksP {
    filter: blur(25px);
  }
}

#joyconRechtsP {
  right: 15vw;
  top: 65vh;
}
@media (max-width: 1400px) {
  #joyconRechtsP {
    filter: blur(25px);
  }
}

#mario-kart {
  width: 450px;
  right: 15vw;
  top: 80vh;
}
@media (max-width: 1400px) {
  #mario-kart {
    filter: blur(25px);
  }
}

#searchbooox:hover {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.searchbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search {
  margin: 20px;
  cursor: pointer !important;
  pointer-events: auto !important;
}
@media (max-width: 800px) {
  .search {
    margin: 0px;
  }
}

.search > h3 {
  font-weight: normal;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search > h1,
.search > h3 {
  margin-bottom: 15px;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search > div {
  display: inline-block;
  position: relative;
  margin-bottom: 25px;
  margin-top: 5px;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search > div:after {
  content: "";
  background: #dadada;
  width: 2.5px;
  height: 20px;
  position: absolute;
  top: 38px;
  right: -2px;
  transform: rotate(132.5deg);
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search > div > input {
  color: #dadada;
  font-size: 18px;
  font-weight: 300;
  background: transparent;
  width: 25px;
  height: 25px;
  padding: 10px;
  border: solid 2.5px #dadada;
  outline: none;
  border-radius: 35px;
  transition: width 0.5s;
  cursor: pointer;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search > div > input::placeholder {
  color: #dadada;
  opacity: 0;
  transition: opacity 150ms ease-out;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search > div > input:focus::placeholder {
  opacity: 0.7;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {
  width: 200px;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.skewed {
  width: 100%;
  height: auto;
  background-color: #171E2F;
  clip-path: polygon(0 0, 100% 7%, 100% 93%, 0% 100%);
}
@media (max-width: 800px) {
  .skewed {
    clip-path: polygon(0 0, 100% 3%, 100% 97%, 0% 100%);
  }
}

.background-sky-dark {
  background: rgb(14, 60, 100);
  background: -moz-linear-gradient(15deg, rgb(14, 60, 100) 25%, rgb(2, 0, 22) 100%);
  background: -webkit-linear-gradient(15deg, rgb(14, 60, 100) 25%, rgb(2, 0, 22) 100%);
  background: linear-gradient(15deg, rgb(14, 60, 100) 25%, rgb(2, 0, 22) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e3c64",endColorstr="#020016",GradientType=1);
}

.background-sky-light {
  background: rgb(200, 221, 242);
  background: linear-gradient(355deg, rgb(200, 221, 242) 0%, rgb(61, 107, 141) 50%, rgb(0, 52, 97) 100%);
}

.full-width {
  width: 100%;
}

.fixed-video {
  z-index: -11;
  margin-top: -230px;
}
@media (max-width: 800px) {
  .fixed-video {
    margin-top: -155px;
  }
}

strong {
  font-weight: bold;
}

#ticket-container {
  height: 420px;
  padding-bottom: 40px;
}
@media (max-width: 800px) {
  #ticket-container {
    overflow: hidden !important;
    position: relative;
    width: 100%;
    height: 350px;
    left: 0px;
    right: 0px;
  }
}

.ticket {
  position: absolute;
  width: auto;
  margin-top: -85px;
  z-index: 1 !important;
}
@media (max-width: 800px) {
  .ticket {
    margin-top: 0px;
    width: 100vw;
    margin-left: 30px;
  }
}

.cp-ticket {
  opacity: 0;
}
.cp-ticket.is-visible {
  opacity: 1;
}

.ticket2 {
  margin-left: 100px;
  margin-top: 20px;
  z-index: 10000;
  width: 708px;
}
@media (max-width: 800px) {
  .ticket2 {
    width: inherit;
    margin-left: 0px;
    margin-top: 90px;
  }
}

.konfetti {
  position: absolute;
  width: auto;
  z-index: 1 !important;
}

#planediv {
  width: 100%;
}
@media (max-width: 800px) {
  #planediv {
    height: 300px;
    width: auto;
    overflow: hidden;
    margin-left: -310px;
  }
}

@media (max-width: 800px) {
  .plane-divider {
    height: 100%;
  }
}

#lead {
  font-family: var(--mono);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  line-height: 1rem;
  color: #6d6470;
  opacity: 1;
}
#lead a {
  margin-left: 5px;
  font-size: inherit;
  opacity: 0.4;
  line-height: 0.75rem;
}
@media (max-width: 800px) {
  #lead a {
    margin-left: 0px;
  }
}
#lead a.type-hover {
  opacity: 0.4;
  text-decoration: none;
}
#lead a.type-hover::after {
  display: none;
}
#lead a.type-hover:hover {
  opacity: 1;
  color: #a69aed;
}
#lead a .type-arrow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55em;
  line-height: 1;
  color: #a69aed;
  opacity: 0;
  pointer-events: none;
}
#lead a .type-label {
  display: inline-block;
  position: relative;
}
#lead a:hover .type-arrow {
  animation: type-hover-arrow 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
#lead a:hover .type-label {
  color: #a69aed;
  animation: type-hover-fade 0.6s ease forwards, type-hover-reveal 0.38s steps(var(--type-steps, 14), end) 0.22s both;
}

@keyframes type-hover-arrow {
  0% {
    opacity: 0;
    left: 0;
  }
  15% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 1;
    left: calc(100% + var(--type-arrow-end, 24px));
  }
}
@keyframes type-hover-fade {
  0% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  37% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes type-hover-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
#cloud {
  width: 75vw;
  position: absolute;
  left: -250px;
  z-index: -1;
}

/* Swiper container stylng */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination {
  position: relative !important;
  bottom: -14px !important;
}

.swiper-pagination-bullet {
  transform: scale(2);
  background: white !important;
  transition: all 0.05s ease-in;
}
.swiper-pagination-bullet:hover {
  transform: scale(3.5);
}

.swiper-pagination-bullet-active {
  transform: scale(2);
  background: white;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 20px !important;
}

.showOnMobile {
  display: none;
}
@media (max-width: 800px) {
  .showOnMobile {
    display: initial;
  }
}

.fishi {
  left: 56% !important;
  bottom: 50px !important;
  width: 50% !important;
}
@media (max-width: 800px) {
  .fishi {
    display: block !important;
  }
}

.bb2 {
  left: 80% !important;
}

.small-card .icon-list {
  display: none;
}

/* ------------------------------------ Dangerous Playground ------------------------------------ */
.head-playground {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 800px) {
  .head-playground {
    padding-bottom: 40px;
  }
}

.grid {
  inline-size: fit-content;
  background-image: url("../Assets/playground/grid.png");
  background-size: auto;
  width: 100%;
  height: 100%;
  z-index: 0;
  position: fixed;
  top: 0;
  pointer-events: none;
}

.background-elements {
  position: fixed;
  left: 0;
  width: 100vw;
  /* height: 100vh; */
  z-index: 0;
  pointer-events: none;
  max-height: 1500px;
}
.background-elements .bottom {
  max-height: 800px;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.dangerousdemosbanner {
  width: 100%;
  padding-bottom: 40px;
  display: inline-flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 800px) {
  .dangerousdemosbanner {
    padding-bottom: 0px;
  }
}

@media screen and (max-width: 960px) {
  /* Bei jedem größeren Monitor kommen neue Regeln hinzu */
  .dangerousdemosbanner {
    transform: scale(0.75);
  }
}
.dd {
  transform: scale(0.85);
  box-shadow: inset 0 0px 4px hotpink, 0 0 0 2px hotpink, 0 0 0 5px #222, 0 0 0 7px hotpink, 0 0px 10px hotpink, 0 0px 40px rgba(190, 0, 255, 0.4392156863), 0 0px 80px rgba(255, 127, 80, 0.3411764706);
  opacity: 0.89;
  padding: 25px 50px;
  animation: neon-text 5s infinite;
  border-radius: 10px;
  z-index: 1;
  opacity: 0.85;
}
@media (max-width: 800px) {
  .dd {
    transform: scale(0.7);
  }
}

.neon {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  /* font-family: "ar", cursive; */
  text-align: center;
  z-index: 1;
  filter: hue-rotate(239deg);
  padding: 0;
  margin: 0;
  font-size: 44px;
  line-height: 40px;
}

.blink {
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}

.blink2 {
  animation: blink 20s infinite;
  -webkit-animation: blink 20s infinite;
}

@-webkit-keyframes blink {
  20%, 24%, 55% {
    color: #111;
    text-shadow: none;
  }
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    /*     color: #fccaff;
        text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
          0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}
@keyframes blink {
  20%, 24%, 55% {
    color: #111;
    text-shadow: none;
  }
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    /*     color: #fccaff;
        text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
          0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}
.awards-header {
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  margin-top: 0px;
  right: 0;
  gap: 10px;
  padding-right: 75px;
}
@media (max-width: 800px) {
  .awards-header {
    flex-direction: row;
    position: relative;
    margin-top: -75px;
    padding-bottom: 15px;
    gap: 10px;
    margin-top: 0px;
    padding-top: 10px;
  }
}

.award-small {
  width: 84px;
}

.awards-container-startseite {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 20px;
}
@media (max-width: 800px) {
  .awards-container-startseite {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    margin-top: -30px;
  }
}

.awards-kachel {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  margin-bottom: -80px;
  right: 0;
  gap: 10px;
}

@media (max-width: 800px) {
  #mav-log-mobile {
    order: 5;
    display: none;
  }
}

#creative-tech-std {
  bottom: 22vh;
  color: black;
}
@media (max-width: 800px) {
  #creative-tech-std {
    bottom: 18vh;
    line-height: 42px;
    font-size: 40px;
    text-align: center;
    -webkit-text-stroke: 0px transparent;
    word-spacing: 1000px;
  }
}

#cursor-follow {
  opacity: 1;
  z-index: 111;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cursor {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 111;
  color: #fff;
  opacity: 0.75 !important;
  pointer-events: none;
}

.cursor-text {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  font-family: aktiv-grotesk-extended, sans-serif;
}

.cursor-text .char {
  position: absolute !important;
}

#playBtn-header {
  position: absolute;
  width: 70px;
  height: 70px;
  top: 24px;
  left: 24px;
  opacity: 1;
  z-index: 111;
  backdrop-filter: blur(7px);
  border-radius: 200px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all ease-in-out 0.5s;
  transition-property: height, width, left, top;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.1803921569);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
}

#playBtn-header:hover {
  width: 140px;
  height: 140px;
  top: -11px;
  left: -11px;
}

#playBtn-header:hover #iconPlay {
  left: 49px;
  top: 44px;
}

#iconPlay {
  width: 40px;
  height: 40px;
  left: 18px;
  position: absolute;
  top: 15px;
  pointer-events: none;
  transition: all ease-in-out 0.5s;
  transition-property: height, width, left, top;
}

#trusted {
  opacity: 1;
  letter-spacing: 1.5px;
}

.list-sub {
  margin-top: -18px;
}

#extrameile-fill {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 160px;
  padding: 60px 0px;
  position: absolute;
  background: -webkit-linear-gradient(75deg, #1a46ed, #ff1300);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fill-me-pls linear;
  animation-timeline: view();
}

@keyframes fill-me-pls {
  from {
    clip: rect(auto, -20vh, auto, auto);
  }
  to {
    clip: rect(auto, 120vh, auto, auto);
  }
}
.zindex-1 {
  z-index: 1;
}

.zindex-2 {
  z-index: 2;
}

.zindex-3 {
  z-index: 3;
}

.zindex-4 {
  z-index: 4;
}

.zindex-5 {
  z-index: 5;
}

.zindex-6 {
  z-index: 6;
}

.zindex-7 {
  z-index: 7;
}

.zindex-8 {
  z-index: 8;
}

.zindex-9 {
  z-index: 9;
}

.zindex-10 {
  z-index: 10;
}

.zindex-11 {
  z-index: 11;
}

.zindex-12 {
  z-index: 12;
}

#extrameileContainerMobile {
  display: none;
}
@media (max-width: 1160px) {
  #extrameileContainerMobile {
    display: block;
    padding-bottom: 140px;
    width: 100%;
    position: relative;
  }
}

.extrameilemobile {
  word-spacing: 1000px;
  font-size: 71px !important;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 160px;
  background: -webkit-linear-gradient(75deg, #1a46ed, #ff1300);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: black;
  position: absolute;
  padding: 60px 0px;
  -webkit-transform: scale(1);
  transform: scale(1);
  position: absolute;
}

#extra {
  padding-top: 40px;
  background: -webkit-linear-gradient(75deg, #1a46ed, #ff1300);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0px transparent;
}

#meile {
  word-spacing: 1000px;
  padding-top: 99px;
  overflow-x: hidden;
  transform: translateX(97px);
}

#scrollVideoVeltins1 {
  width: 100%;
}

#scrollVideoVeltins2 {
  position: relative;
  height: 250px;
  max-width: 90vw;
  left: 50%;
  transform: translate(-50%, 20px);
  border-radius: 20px;
}

/*# sourceMappingURL=style.css.map */