html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}



body {
  background-color: #fff;
  color: var(--gmw-grau);
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  cursor:none;
}

body.ccm-blocked{
  cursor:default !important;
}
body.ccm-blocked button, body.ccm-blocked a{
  cursor:pointer !important;
}

.show {
  display: block !important;
}

.ccm-widget button{
  cursor:pointer !important;
}



/* CSS für den benutzerdefinierten Cursor */
.custom-cursor {
  pointer-events: none;
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: var(--gmw-rot);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  z-index: 9999;
}

/* Animation beim Hover über Links */
.hover-effect {
  opacity:1;
  width: 35px !important;
  height: 35px !important;
  background-color:rgba(208,0,58,0.3);
  transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease,  background-color 0.3s ease;
}

.hover-effect:before{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  content:"";
  width:8px;
  height:8px;
  background-color:var(--gmw-rot);

    transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}



/************* SCHRIFT LOCAL EINBINDEN *************/
@font-face {
  font-family: "Nexa-Black";
  src: local("Nexa-Black"), url('../fonts/Nexa_Heavy.otf') format('opentype');
}

/* NEXA HEAVY */
@font-face {
  font-family: 'Nexa-Black';
  font-style: normal;
  src: url('../fonts/Nexa_Black.otf') format('opentype');
}

/* NEXA Book */
@font-face {
  font-family: 'Nexa-Book';
  font-style: normal;
  src: url('../fonts/Nexa_Book.otf') format('opentype');
}

/* NEXA Book */
@font-face {
  font-family: 'Nexa-Regular';
  font-style: normal;
  src: url('../fonts/Nexa_Regular.otf') format('opentype');
}

/***** COLORS *****/
:root {
  --gmw-white: #ffffff;
  --gmw-rot: #d0003a;
  --gmw-grau: #0f0f0f;
}


/************** TYPOGRAFIE **************/
h1,
h3,
strong,
h2,
a {
  font-family: "Nexa-Black", sans-serif;
}

p,
em,
b,
li,
td,
span,

h4 {
  font-family: "Nexa-Book", sans-serif;
}

h1 {
  font-size: 2.5em;
  text-transform: uppercase;
  line-height: 1em;
}

h2 {
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gmw-rot);

}

h3 {
  font-size: 2.7em;
  text-transform: uppercase;
  line-height: 1em;
  margin-bottom: 30px;
}

h4 {
  font-size: 1.5em;
  text-transform: uppercase;
}

a {
  font-size: 1em;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  color:var(--gmw-grau);
}

a:hover {
  text-decoration: none;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  color: var(--gmw-rot);
}

p,
b,
i,
strong,
em,
li,
td {
  font-size: 1em;
}

p {
  margin-bottom: 30px;
  font-size:1.2em;
}

.blackbox h2 {
  color: var(--gmw-rot);
}

.blackbox h3,
.blackbox p,
.blackbox a {
  color: white;
}



.blackbox p {
  opacity: 0.7;
}


.text-alternate h3{
  font-size:4em;
}
.red{
  color:var(--gmw-rot);
}
/******** Buttons/ a-Tags **********/

a.button {
  display: inline-block;
  color: var(--gmw-grau);
  background-color: var(--gmw-rot);
  text-transform: uppercase;
  padding: 10px 20px;
  letter-spacing: 0px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  margin-right: 15px;
  position: relative;
}

a.button:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 2px;
  width: 0px;
  background-color: var(--gmw-rot);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  /*  box-shadow:0px 0px 0px red;*/
}

a.button i {
  position: absolute;
  top: 0;
  transform: translateX(10px);
  opacity: 0;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  /* background-color: var(--gmw-rot); */
  background: transparent;
  padding: 9px;
  height: 44px;
  right: -37px;
  color: var(--gmw-rot);
  font-size: 1.5em;
}

a.button:hover i {
  transform: translateX(-5px);
  opacity: 1;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

a.button:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  height: 2px;
  width: 0px;
  background-color: var(--gmw-rot);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  /*    box-shadow:0px 0px 0px red;*/
}

a.button:hover {
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  background-color: transparent;
  color: var(--gmw-rot);
}

a.button:hover:before {
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  width: 100%;
  background-color: var(--gmw-rot);
  /*  box-shadow:0px 0px 6px red;*/
}

a.button:hover:after {
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  width: 100%;
  background-color: var(--gmw-rot);
  /*    box-shadow:0px 0px 6px red;*/
}

.text-alternate a.button, header a.button, .video-slider a.button{
  margin-right:30px;
}

a.button.secondary{
  background-color:var(--gmw-grau);
  margin-top:10px;
}

a.button.secondary:hover{
  background-color:transparent;
}

a.button.back{
  margin-bottom:2rem;
}

a.button.back i{
    position: absolute;
  top: 0;
  transform: translateX(-10px);
  opacity: 0;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  background: transparent;
  padding: 9px;
  height: 44px;
  left: -37px;
  right:unset;
  color: var(--gmw-rot);
  font-size: 1.5em;
}

a.button.back:hover i{
  transform:translateX(5px);
  opacity:1;
}

.video-slider a.button.secondary{
background-color:white;
margin-top:10px;
color:var(--gmw-grau);
}

.video-slider a.button.secondary:hover{
  background-color:transparent;
  color:var(--gmw-rot);
}



section.white a.button {
  color: var(--gmw-white);
}

section.white a.button:hover {
  color: var(--gmw-rot);
}

a.secondary-button {
  position: relative;
  text-transform: uppercase;
  color: var(--gmw-white);
  cursor: pointer;
}

a.secondary-button:before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0px;
  width: 50%;
  height: 2px;
  background-color: Var(--gmw-rot);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  box-shadow: 0px 0px 0px red;
}

a.secondary-button:after {
  content: "";
  position: absolute;
  top: -5px;
  right: 0px;
  width: 0%;
  height: 2px;
  background-color: Var(--gmw-rot);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

a.secondary-button:hover:before {
  width: 80%;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  box-shadow: 0px 0px 6px red;
}

a.secondary-button:hover:after {
  width: 80%;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

section.white a.secondary-button {
  color: var(--gmw-grau);
}

section.white .blackbox a.button {
  color: var(--gmw-grau);
}

.blackbox a.button {
}

section.white .blackbox a.button:hover {
  color: var(--gmw-rot);
}
header a.button.secondary{
  background-color:transparent;
  color:white;
  border:2px solid white;
  padding:8px 20px;
}

header a.button.secondary:hover{
  border:2px solid var(--gmw-rot);
  color:white;
}

header a.button.secondary:before, header a.button.secondary:after, header a.button.secondary i{
  display:none;
}

section.darkgrey p,
section.darkgrey h3 {
  color: white;
}

section.darkgrey h3{
  font-size:4em;
}

section.darkgrey p {
  opacity: 0.7;
}

.col-md-12 .text-center p {
  margin: 0px auto;
  width: 70%;
}

span.tag {
    font-family: "Nexa-Black", sans-serif;
    letter-spacing: 2px;
    padding: 5px 10px;
    padding-top: 6px;
    margin-right: 5px;
    margin-bottom: 10px;
    background-color: var(--gmw-rot);
    text-transform: uppercase;
    color: white;
    display: inline-block;
    font-size: 0.8em;
    line-height: 0.8em;
}

span.tag:first-child{
  background-color:var(--gmw-grau);
}

section.darkgrey span.tag {
    background-color: var(--gmw-rot);
    color: var(--gmw-grau);
    display: block;
    padding: 10px 14px;
    font-size: 1em;
    position: absolute;
    top: 30px;
    right: 60px;
    font-family: "Nexa-Black", sans-serif;
    text-transform: uppercase;
    border-radius: 40px;
}

section.darkgrey span.tag:first-child{
  background-color:white;
}

section.darkgrey .contact p{
  opacity:1;
}

section.darkgrey .contact strong{
  margin-bottom:10px;
  display:block;
}

section.darkgrey .contact i{
      margin-right: 10px;
}

/**** GENERAL ****/
.row>* {
  padding-left: 40px;
  padding-right: 40px;
  position:relative;
}

/********* KEYFRAME ANIMATIONEN *********/

@keyframes bounceDown{
  0% {transform:rotate(-15deg)translateY(-200px)}
  60%{transform:rotate(5deg)translateY(5px)}
  80%{transform:rotate(-5deg)translateY(-5px)}
  100%{transform:rotate(0deg)translateY(0px)}
}
@keyframes clickme{
  0%{opacity:0.5}
  80%{opacity:0.5}
  100%{opacity:1}
}

@keyframes clickme2{
  0%{opacity:1; margin-left: 0.25em;opacity:1;color:white;transform:scale(1)}
  80%{opacity:1; margin-left: 0.25em;opacity:1;color:white;transform:scale(1)}
  100%{ margin-left: 0.4em;opacity:1;color:var(--gmw-rot);transform:scale(1.1)}
}

@keyframes blurInDown {
  0% {
    filter: blur(150px);
    opacity: 0;
    transform: translateY(-300px)scale(1.5)
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0px)scale(1)
  }
}

@keyframes blurInUp {
  0% {
    filter: blur(150px);
    opacity: 0;
    transform: translateY(100px)scale(1.5)
  }

  100% {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0px)scale(1)
  }
}

@keyframes blurIn {
  0% {
    filter: blur(150px);
    opacity: 0;
  }

  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes fadeInLeftSlow {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fadeInUpSlow {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}


@keyframes fadeInRightSlow {
  0% {
    transform: translateX(50px);
    opacity: 0
  }

  100% {
    transform: translateX(0px);
    opacity: 1
  }
}

@keyframes blurAppear {
  0% {
    opacity: 0;
    display: none;
    filter: blur(100px)
  }

  10% {
    opacity: 0;
    display: block;
    filter: blur(100px)
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
    filter: blur(0px)
  }
}

@keyframes blurDisappear {
  0% {
    transform: translateX(0px);
    opacity: 1;
    filter: blur(0px)
  }

  90% {
    opacity: 0;
    display: block;
    filter: blur(100px)
  }

  100% {
    opacity: 0;
    display: none;
    filter: blur(100px)
  }
}

@keyframes pulse {
  0% {
    transform: translate(5px, 5px)scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-6px, -2px)scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(5px, 5px)scale(1);
    opacity: 1;
  }
}

@keyframes pulseback {
  0% {
    transform: translate(5px, -5px)scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-2px, 2px)scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(5px, -5px)scale(1);
    opacity: 1;
  }
}

@keyframes colorchange {
  0% {
    background-color: var(--gmw-white)
  }

  100% {
    background-color: var(--gmw-rot)
  }
}

@keyframes glow {
  0% {
    box-shadow: 0px 0px 0px var(--gmw-rot);
  }

  100% {
    box-shadow: 0px 0px 10px var(--gmw-rot);
  }
}

@keyframes pulse-2 {
  0% {
    transform: translate(0px, 0px)scale(1);
  }

  50% {
    transform: translate(4px, 4px)scale(0.8)
  }

  100% {
    transform: translate(0px, 0px)scale(1)
  }
}

@keyframes dash {

  0% {
    opacity: 0;
    stroke-dashoffset: 200px;
  }

  1% {
    stroke-dashoffset: 200px;
    opacity: 1;
  }

  99% {
    stroke-dashoffset: -200px;
    opacity: 1
  }

  100% {
    stroke-dashoffset: -200px;
    opacity: 0;
  }
}

#one:before,
#one:after {
  display: none;
}


.blurAppear {
  animation-name: blurAppear;
  animation-timing-function: cubic-bezier(.65, .47, 0, 1);
  animation-duration: 1.5s;
}

.blurDisappear {
  animation-name: blurDisappear;
  animation-timing-function: cubic-bezier(.65, .47, 0, 1);
  animation-duration: 1.5s;
}

.blurInDown {
  animation-name: blurInDown;
  animation-timing-function: cubic-bezier(.65, .47, 0, 1);
  animation-duration: 1.5s;
}

.blurInUp {
  animation-name: blurInUp;
  animation-timing-function: cubic-bezier(.65, .47, 0, 1);
  animation-duration: 1.5s;
}

.blurIn {
  animation-name: blurIn;
  animation-duration: 3s;
}

.fadeInLeftSlow {
  animation-name: fadeInLeftSlow;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.52, 0, .1, .95);
}

.fadeInUpSlow {
  animation-name: fadeInUpSlow;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.52, 0, .1, .95);
}

.fadeInRightSlow {
  animation-name: fadeInRightSlow;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.52, 0, .1, .95);
}

.pulse {
  animation-name: pulse;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  /*animation-timing-function:cubic-bezier(.52,0,.1,.95);*/
}

.bounceDown{
  animation-name: bounceDown;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(.52, 0, .1, .95);
}


@keyframes hideandfade{
  0%{opacity:1;display:block;width:33.333333%;transform:scale(1);filter:blur(0px);padding-left:15px;padding-right:15px;}
  50%{opacity:0;display:block;width:0%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
  100%{opacity:0;display:none;width:0%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
}
@keyframes hideandshow{
  0%{opacity:0;display:none;width:0%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
  50%{opacity:0;display:block;width:33.333333%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
  100%{opacity:1;display:block;width:33.333333%;transform:scale(1);filter:blur(0px);padding-left:15px;padding-right:15px;}
}
@keyframes hideandshow50{
  0%{opacity:0;display:none;width:0%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
  50%{opacity:0;display:block;width:0%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
  100%{opacity:1;display:block;width:50%;transform:scale(1);filter:blur(0px);padding-left:15px;padding-right:15px;}
}
@keyframes hideandshow100{
  0%{opacity:0;display:none;width:0%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
  50%{opacity:0;display:block;width:0%;transform:scale(1);filter:blur(50px);padding-left:0px;padding-right:0px;}
  100%{opacity:1;display:block;width:100%;transform:scale(1);filter:blur(0px);padding-left:15px;padding-right:15px;}
}

.hideandfade{
  animation:hideandfade 1.1s ease-in-out forwards !important;
  opacity:0;
  display:none;
}

.hideandshow{
  animation:hideandshow 1.1s ease-in-out forwards;
}

span.controls{
  display:none;
}
div#c53 span.controls{
    background-color: var(--gmw-rot);
    color: var(--gmw-grau);
    display: block;
   width:40px;height:40px;
    font-size: 1em;
    position: absolute;
    top: 30px;
    right: 60px;
    font-family: "Nexa-Black", sans-serif;
    text-transform: uppercase;
    border-radius: 40px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);
  cursor:pointer;
  user-select:none;
}
div#c53 span.controls:hover{
  background-color:white;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

div#c53 span.controls i{
      position: absolute;
    top: 50%;
    left: 47%;
    transform: translate(-50%, -50%);
}
/******** Nav **********/

nav {
  width: 100%;
  height: 74px;
  padding: 0em;
  background-color: transparent;
  position: fixed;
  top: 0px;
  z-index: 999;
  transition: 0.4s;
  text-align: center;
  display: table;
}


.social-media {
  position: absolute;
  top: 15px;
  left: 40px;
  height: 40px;
  width: 100px;
  display: flex;
}

.social-media a:hover img{
  transform:scale(1.1)rotate(-5deg);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

.social-media img {
  width: 30px;
  display: inline-block;
  vertical-align:top;
  margin-left: 10px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
.contact-menu{
  position:absolute;
  bottom:50px;
  left:50px;
  display:flex;
  grid-gap:20px;
}

#menu .contact-menu a{
  display:inline-block;
  font-size:1em;
  color:var(--gmw-rot);
  letter-spacing:2px;
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

#menu .contact-menu a:hover{
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  color:white;
}
#menu .contact-menu i{
        transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
#menu .contact-menu a:hover i{
  transform:scale(1.2);
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
color:var(--gmw-rot);
}

#menu .contact-menu i{
  margin-right:10px;
}
.contact-menu img{
  width:30px;
  height:30px;
}

.logo-container {
  width: 300px;
  height: 100px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  position: absolute;
  top: 25px;
  left: 50px;
  z-index: 99;
  padding:10px;
}

/*.nav_scroll .logo-container {
  width: 70px;
  left: 45px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}*/

.logo {
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  top: 35px;
  left: 100px;
  width: 200px;
  cursor:pointer;
  position:absolute;

}

.logo:hover{
  transform:scale(1.1);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.nav_scroll .logo:hover{
  transform:scale(1);
}

.nav_scroll .logo:hover .emblem{
  transform:rotate(-5deg)scale(1.1);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}



svg{
  overflow:visible;
}
.emblem{
  fill:var(--gmw-rot);
  z-index:2;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
.font{
  fill:var(--gmw-darkgrey);
  transition:1.5s cubic-bezier(.52, 0, .1, .95);
  z-index:1;
}
#logo.light .font{
  fill:var(--gmw-darkgrey);
}

#logo.dark .font{
  fill:white;
}

.nav_scroll .font{
  width:0px;
  opacity:0;
  transition:0.7s cubic-bezier(.52, 0, .1, .95);
  fill:var(--gmw-rot);
  fill-opacity:0;
filter:blur(10px);
  /*transform: translateY(-100px)skewY(-45deg)skewX(-45deg)scale(0)scaleX(2);*/
      /*transform: translateX(70px)translateY(26px)rotateX(90deg)rotateY(90deg)scale(0.5);*/
      transform: translateX(100px)rotate3d(1, 100, 1,90deg)scale(0.5);

}
.nav_scroll {}

.nav_scroll .logo {
  transition: 0.5s;
  top: 35px;
  left: 35px;
  width: 200px;
}

/************** MOBILE MENU Toggle ************/

#menuToggle {
  display: block;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 90px;
  height: 52px;
  position: absolute;
  top: -31px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 4;
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  border-radius: 3px;
  z-index: 3;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);

}


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

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

#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-10px, -30px);
  background-color: var(--gmw-rot);
}

#menuToggle input:checked~span:nth-last-child(3) {
  transform: rotate(-45deg) translate(6px, 12px);
  background-color: var(--gmw-rot);
}


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

#menu {
  position: fixed;
  width: 50%;
  top: 0;
  background: var(--gmw-grau);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translateX(100%);
  transition: 0.6s cubic-bezier(.52, 0, .1, .95);
  z-index: 1;
  padding: 0px;
  right: 0px;
  height: 100vh;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 40px;
  text-align: left;
  backdrop-filter: saturate(2)contrast(1.5)blur(15px);
}

/*#menu a::after {
  content: "";
  position: absolute;
  width: 30%;
  opacity: 0;
  height: 2px;
  background-color: var(--gmw-rot);
  top: 40px;
  left: 280px;
  transition: 0.4s cubic-bezier(.52, 0, .1, .95);
  z-index:-1;
}*/

/*#menu li:hover a::after {
  content: "";
  position: absolute;
  width: 100%;
  opacity: 1;
  height: 2px;
  background-color: var(--gmw-rot);
  top: 40px;
  left: 280px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  /*box-shadow: 0px 0px 6px red;*/
  /*z-index:-1;
}*/

#menu a{
  display:inline-block;
  position:relative;
}
#menu a:after{
      content: "";
    position: absolute;
    width: 200px;
    opacity: 0;
    height: 2px;
    background-color: var(--gmw-rot);
    top: 27px;
    left: calc(100% + 40px);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
    /* box-shadow: 0px 0px 6px red; */
    z-index: -1;
}
#menu li:hover a::after {
    content: "";
    position: absolute;
    width: 800px;
    opacity: 1;
    height: 2px;
    background-color: var(--gmw-rot);
    top: 27px;
    left: calc(100% + 40px);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
    /* box-shadow: 0px 0px 6px red; */
    z-index: -1;
}

/*#menu li.has-children a:nth-child(1)::after{
  display:none;
}

#menu li.has-children:hover a:nth-child(1)::after{
  display:none;
}*/

#menu li {
  padding: 10px;
  transition: 0.2s ease-in-out;
  position: relative;
}

#menu li:hover {
  transition: 0.2s ease-in-out;
}

#menu a {
  display: inline-block;
  font-style: normal;
  font-size: 2.3em;
  text-transform: uppercase;
  color: Var(--gmw-white);
  cursor: pointer;
position:relative;
}

#menu a:hover {
  color: var(--gmw-rot)
}

#menuToggle input:checked~ul {
  opacity: 1;
  transition: 0.6s cubic-bezier(.52, 0, .1, .95);
  transform: translateX(0px);
}

.navigation {
  display: block;
  position: absolute;
  right: 100px;
  top: 55px;
  top: 25px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  padding-top: 22px;
  padding-left: 6px;
  width: 54px;
  height: 54px;
}

.nav_scroll .navigation {
  right: 45px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  /*background-color:var(--gmw-rot);*/
  width: 54px;
  height: 54px;
}

.has-children {
  position: relative;
}



#menu .mobile-dropdown {
    position: absolute;
    right: -30px;
    top: 50%;
    opacity:0;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    transform: translateY(-50%);
    filter:blur(30px);
}
#menu .mobile-dropdown li{
  background-color:var(--gmw-rot);
  display:inline-block;
  margin-right:20px;
border:2px solid transparent;
transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

#menu .mobile-dropdown li:hover{
  background-color:var(--gmw-grau);
  display:inline-block;
  margin-right:20px;
  border:2px solid var(--gmw-rot);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
#menu .mobile-dropdown a{
  color:var(--gmw-grau);
  font-size:1em;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

#menu .mobile-dropdown li:hover a{
  color:white;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

#menu .mobile-dropdown a:after{
  display:none;
}
#menu li:hover .mobile-dropdown{
  filter:blur(0px);
  right:30px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);
  opacity:1;
}

/************** MOBILE MENU ENDE ***********/

/************** CONTACT-BAR ***********/

/*************   Media  **************/

/************** INHALTE ***********/


.content {
  width: 95%;
  margin: 0px auto;
  padding: 100px;
  padding-top: 200px;
  padding-bottom: 200px;
  position:relative;
}


.text-blackbox .col-md-6 {
  position: relative;
}

.blackbox {
  background-color: var(--gmw-grau);
  padding: 40px;
  position: relative;
  z-index: 1;
}

.media{
  padding:0px !important;
width:100%;
}

.media img, .media video{
  width:100%;
  height:auto;
}
.blackbox-after {
    content: "";
    width: calc(100% - 80px);
    height: calc(100%);
    background-color: var(--gmw-rot);
    position: absolute;
    bottom: -40px;
    right: 0px;
    z-index: 0;
}
section.background-image .blackbox-after {
    width: calc(100% - 80px);
    height: calc(100%);
    bottom: -40px;
    right: 0px;
}

.text-blackbox .blackbox-after {
  bottom:0px;
  height:calc(100% - 40px);
}

@keyframes wobbleup{
  0%{transform:translate(0px, 0px)}
  12%{transform:translate(10px, 10px)}
  25%{transform:translate(20px, 20px)}
  36%{transform:translate(10px, 30px)}
  50%{transform:translate(0px, 40px)}
  62%{transform:translate(-10px, 30px)}
  75%{transform:translate(-20px, 20px)}
  87%{transform:translate(-10px, 10px)}
  100%{transform:translate(0px, 0px)}
}
@keyframes wobbleupback{
  0%{transform:translate(0px, 0px)}
  12%{transform:translate(-10px, -10px)}
  25%{transform:translate(-20px, -20px)}
  36%{transform:translate(-10px, -30px)}
  50%{transform:translate(0px, -40px)}
  62%{transform:translate(10px, -30px)}
  75%{transform:translate(20px, -20px)}
  87%{transform:translate(10px, -10px)}
  100%{transform:translate(0px, 0px)}
}
section.darkgrey .blackbox-after {
    width: calc(100% - 80px);
    height: calc(100%);
bottom: -40px;
    left: -0px;
}


/*section.darkgrey .blackbox-after {
    width: calc(100% - 80px);
    height: calc(100%);
    bottom: -3%;
    right: 14%;
}*/


.icon-box {
  position: absolute;
  top: 25px;
  right: 35px;
}

.icon-box img {
  width: 70px;
}

.video-slider {
  overflow: hidden;
  position: relative;
}

.video-slider video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
min-height: 100%;
    min-width: 100%;
}

.video-slider h3{
  font-size:4em;
  mix-blend-mode:difference;
  color:white;
}

.video-slider p{
  mix-blend-mode:difference;
  color:white;
}

#video-xr{
  filter:blur(0px);
}

.video-slider .text-blackbox .col-md-6 {
  min-height: 400px;
}

.video-slider .blackbox-after {
    content: "";
    width: calc(100% - 80px);
    height: calc(100%);
    background-color: var(--gmw-rot);
    position: absolute;
    bottom: -40px;
    left: 0px;
    z-index: 0;
}

.video-slider .carousel-item {
  height: auto;
}

.video-slider .carousel-caption {
  position: relative;
  top: unset;
  left: unset;
  right: unset;
  bottom: unset;
  margin: 120px;
  text-align: left;
}

.video-slider .carousel-indicators {
  margin: unset;
  top: 50%;
  left: 50%;
  bottom: unset;
  right: unset;
  transform: translate(-50%, -50%);
  display: block;
}

.video-slider .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
  border: none;
}

.video-slider .carousel-indicators .active {
  background-color: var(--gmw-rot);
  opacity: 1;
}

/**** SECTIONS ****/

section.darkgrey {
  background-color: var(--gmw-grau);
}

section.white {
  background-color: var(--gmw-white);
}

section.video-slider {}

section.background-image {
  position: relative;
  overflow: hidden;
  background-color: var(--gmw-grau);
}

section.background-image img {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    /* width: 110%; */
    /* filter: blur(5px) saturate(1.2); */
    z-index: 0;
    min-height: 100%;
}


.siteheader {
  margin-top: 100px;

}

.leistungen i {
  color: var(--gmw-rot);
  padding: 10px;
  font-size: 2em;

  display: block;
  margin-bottom: 15px;
}

.leistungen span {
  font-family: "Nexa-Black", sans-serif;
  text-transform: uppercase;
  background-color: var(--gmw-rot);
  color: white;
  padding: 5px 10px;
  font-size: 1em;
  /* text-align: center; */
  display: inline-block;
  letter-spacing: 2px;
  margin-bottom: 15px;
  transition: 0.4s cubic-bezier(.52, 0, .1, .95);
}

.leistungen .col-md-6 .col-md-6 {
  padding-top: 20px;
  padding-bottom: 20px;
  transition: 0.4s cubic-bezier(.52, 0, .1, .95);
  cursor: pointer;
}

.leistungen .col-md-6 .col-md-6:hover {
  background-color: var(--gmw-grau);
  color: white;
  transform: translateY(-10px);
  transition: 0.4s cubic-bezier(.52, 0, .1, .95);
}

.leistungen .col-md-6 .col-md-6:hover span {
  color: var(--gmw-grau);
  transition: 0.4s cubic-bezier(.52, 0, .1, .95);
}

/************** SLIDER ***********/
#agentur {
  font-size: 3.8em;
}

.roller {
  height: 4.125rem;
  line-height: 4.2rem;

  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  margin-bottom:30px;
}


#spare-time {
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 1rem;
  margin-top: 0;
}

.roller #rolltext {
  position: absolute;
  top: 0;
  animation: slide 8s cubic-bezier(.52, 0, .1, .95) infinite;
  animation-delay: 1s;
  font-family: "Nexa-Black", sans-serif;
  color: var(--gmw-grau);
  transform: translateY(7px);
}

@keyframes slide {
  0% {
    top: 0;
  }

  25% {
    top: -4.2rem;
  }

  50% {
    top: -8.4rem;
  }

  72.5% {
    top: -12.6rem;
  }
}


header {
  width: 100%;
  background-color: var(--gmw-grau);
  height: 950px;
  height: 100vh;
  display: flex;
}


.header-caption {
  position: relative;
  height: 100%;
  width: 50%;
  padding: 80px;
}

.header-gradient {
  background: rgb(15, 15, 15);
  background: linear-gradient(90deg, rgba(15, 15, 15, 1) 0%, rgba(15, 15, 15, 1) 3%, rgba(15, 15, 15, 0) 100%);
  width: 25%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
}

.header-caption h1 {
  font-size: 1.2em;
  letter-spacing: 2px;
  color: var(--gmw-rot);
  font-family: "Nexa-Black", sans-serif;
}

.header-caption h2 {
  /*font-size: 2.7em;*/
  font-size:4em;
  color: var(--gmw-white);
  font-family: "Nexa-Black", sans-serif;
  margin-bottom: 30px;
  line-height: 1em;
}

.text-caption {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  left: calc(100px + 5%);
  padding-left:40px;
}

.interactive-video {
  width: 50%;
  overflow: hidden;
  position: relative;
}

.black-layer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: var(--gmw-grau);
  opacity: 0.4;
}

.interactive-video video {
    height: calc(100% + 65px);
    position: absolute;
    top: 0%;
    left: 50%;
    /* filter: blur(10px); */
    transform: translateX(-50%);
}

.interactive-video a.secondary-button {
  position: absolute;
  z-index: 3;
  bottom: 35px;
  left: 35px;
}

.svg-box {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100%;
  filter: blur(0px);
}

#XR {
  height: 100vh;
  width: auto;
  position: absolute;
  z-index: 3;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  backdrop-filter: saturate(1.5)blur(20px);
  -webkit-backdrop-filter: saturate(1.5)blur(20px);
  z-index: 3
}

#CGI {
  height: 100vh;
  width: auto;
  position: absolute;
  z-index: 3;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  backdrop-filter: brightness(2)saturate(1.5)blur(20px);
  -webkit-backdrop-filter: saturate(1.5)blur(20px);
  z-index: 2;
}
/*
.svg-box:nth-of-type(1){ z-index: 4;}
.svg-box:nth-of-type(2){ z-index: 3;}
.svg-box:nth-of-type(3){ z-index: 2;}
.svg-box:nth-of-type(4){ z-index: 1;}
*/
#CGI-box {}

.dot-container {
  position: absolute;
  z-index: 3;
  /*  bottom: 35px;
  right: 45px;
  display: flex;*/
  top: 50%;
  left: 35px;
  transform: translateY(-50%);
  z-index:6;
}

.dot {
  display: block;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
  transition: 0.4s ease-in-out;
  cursor: pointer;
}

.dot h3 {
  position: absolute;
  left: 20px;
  top: -6px;
  font-family: "Nexa-Black", sans-serif;
  color: white;

  display: block;
  padding: 5px;
  font-size: 0.8em;
  width: max-content;
  text-transform: uppercase;
  margin-bottom: 0px;
  opacity: 0;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.dot.active h3 {
  animation: blurInAppear 2s;
  opacity: 1;
  background-color: var(--gmw-rot);
  color: var(--gmw-grau);
  padding: 5px 15px;
}

.dot:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  transition: 0.4s ease-in-out;
}

.dot:hover h3 {
  opacity: 1;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}


.dot:last-child:after {
  display: none;
}

.dot.active {
  background-color: var(--gmw-rot);
  opacity: 1;
}

.dot:first-child {
  margin-left: 0px;
}

.dot:last-child {
  margin-right: 0px;
}


.interaction-point {
  width: 40px;
  height: 25px;
  display: block;
  position: absolute;
  opacity: 0;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  cursor: pointer;
  z-index: 7;
}

/*.point-animation {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    top: -15px;
    left: -14px;
    border: 1px solid var(--gmw-rot);
    border-radius: 40px;
    transform: scale(0);
    opacity: 0;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}*/

.point-animation {
  opacity: 1;
}

.interaction-point a {
  color: white;
  text-transform: uppercase;
  display: inline-block;
  width: 200px;
  opacity: 0;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  transform: scale(0)translateX(30px)translateY(-44px);
  padding: 10px;
  filter: blur(30px);
}

/*.interaction-point:before{
  content:"";
  width: 25px;
  background-color:Var(--gmw-rot);
  height:2px;
  display: block;
  position: absolute;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  cursor: pointer;
    animation:glow 5s infinite;
}
.interaction-point:after{
  content:"";
  width:25px;
  height:2px;
  background-color:var(--gmw-rot);
  position:absolute;
  transform:rotate(90deg);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
      animation:glow 5s infinite alternate-reverse;
}*/

#one {
  top: 20%;
  left: 37%;
  animation-direction: reverse;
  animation: blurInDown 1s, pulse 8s infinite;
  animation-delay: 1s;
}

#point-1 {
  top: 20%;
  left: 37%;
  animation-direction: reverse;
  animation: blurInDown 1s, pulse 8s infinite;
  animation-delay: 1s;
}
/*
#two {
  bottom: 20%;
  left: 45%;
  animation: blurInDown 1s, pulseback 8s infinite;
  animation-delay: 1.5s;
}*/

#point-2, #point-5, #point-8, #point-11 {
  bottom:250px;
  left: 250px;
  animation: blurInDown 1s, pulseback 8s infinite;
  animation-delay: 1.5s;
}
#point-3, #point-6, #point-9, #point-12 {
top: 500px;
    left: 400px;
  animation-direction: reverse;
  animation: blurInDown 1s, pulse 8s infinite;
  animation-delay: 2s;
}
#point-4, #point-7, #point-10, #point-13 {
  top: 250px;
  left: 250px;
  animation: blurInDown 1s, pulseback 8s infinite;
  animation-delay: 2.5s;
}


.interaction-point:hover {
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.interaction-point-group{
  transition:0.5s ease;
  transition-delay:0.5s;
}

.interaction-point:hover .test-1 {
  filter: blur(30px);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.interaction-point:hover .test-0 {
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  width: 20px;
  height: 20px;
}

.interaction-point:hover {
  fill: transparent;
}

.interaction-point:hover .point-animation {
  transform: scale(1)translateX(30px)translateY(-44px);
  opacity: 1;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}


.interaction-point:hover a {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1)translateX(30px)translateY(-44px);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

.test-0 {
  animation: pulse-2 2s infinite;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

.test-1 {
  stroke-dasharray: 40;
  stroke-dashoffset: -200;
  animation: dash 8s linear infinite;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);

}

/* Info Box */
.info-box {
  z-index: 2;
  position: absolute;
  padding: 20px;
  width: 80%;
}

.info-box div {
  position: relative;
}

.info-box img {
  width: 200px;
  height:auto;
}

.info-box h4 {
  color: var(--gmw-rot);
  font-family: "Nexa-Black", sans-serif;
  font-size: 1em;

}

.info-box .info-box-text {
  position: absolute;
  left: 210px;
  top: 35%;
  padding: 20px;
  width: 50%;
}

.info-box p {
  color: white;
  margin-bottom: 0px;
}

#info-box-1 {
  top: 14%;
  left: 8%;
}

#info-box-2, #info-box-5, #info-box-8, #info-box-11 {
  bottom: 90px;
  left: 10px;
}

#info-box-3, #info-box-6, #info-box-9, #info-box-12 {
  top: 460px;
  left: 160px;
}

#info-box-4, #info-box-7, #info-box-10, #info-box-13 {
    top: 210px;
    left: 10px;
}


.show {
  opacity: 1;
    transition:0.5s ease;
  transition-delay:0.5s;
}

.hide {
  opacity: 0;
  transition:0.5s ease;
  transition-delay:0.5s;
}


/* PROJEKTE */


/* REFERENZEN */
.referenzen {
}

.frame-22 {
  background: #0f0f0f;
  padding: 20px 0px 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.filter {
    background: var(--gmw-grau, #0f0f0f);
    align-items: center;
    /* justify-content: space-between; */
    flex-shrink: 0;
    width: 100%;
    position: relative;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-item {
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
  font-family: "NexaBlack-Regular", sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;

  display: inline-block;
transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
.filter-item h2{
  color:white;
  font-size:1em;
  opacity:0.7;
  cursor:pointer;
  padding:10px 15px;
  border:2px solid var(--gmw-rot);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  margin-bottom:0px;
}

.filter-item h2:hover{
  border:2px solid var(--gmw-rot);
  opacity:1;
  transform:translateY(-5px);
  padding:10px 15px;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.filter-item.active h2 {
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  color: var(--gmw-grau);
  opacity:1;
  padding:10px 15px;
    background-color:var(--gmw-rot);
}



.referenz-grid {
  width: 95%;
  margin: 0px auto;
  padding: 120px;
  padding-bottom: 200px;
  display: flex;
  flex-direction: column;
}

.grid-row {
  display: flex;
}

.grid-item {
    position: relative;
    cursor: pointer;
    background-color: var(--gmw-grau);
    box-shadow: 0px 0px 30px transparent;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
    /*width: 100%;
    width: calc(100% / 3);*/
    margin-bottom: 30px;
  padding:0px;
}

.grid-row .grid-item:first-child{
  margin-left:0px;
}

.grid-row .grid-item:last-child{
  margin-right:0px;
}

.grid-item:hover{
  box-shadow:0px 0px 30px black;
          transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
          transform:translateY(-20px)scale(1.025);
}

.grid-item .arrow {
  width: 46px;
  height: 62px;
  position: absolute;
  right: 10px;
  top: 5px;
  overflow: visible;
        transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}


.grid-item:hover .item-image img{
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  filter:blur(30px);
  transform:scale(1.5);
  opacity:0.5;
}

.grid-item:hover .arrow {
    top: 50%;
    right: calc(50% - 80px);
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

 .item-info:before{
  content:"Projekt anzeigen";
  font-family:"Nexa-Black", sans-serif;
  font-size:1em;
  text-transform:uppercase;
  letter-spacing:2px;
  color:white;
  position:absolute;
  padding:10px;
  border:2px solid transparent;
  z-index:2;
  top:25%;
  filter:blur(30px);
  opacity:0;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width: 60%;
  text-align:center;
          transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.grid-item:hover .item-info:before{
          transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  border:2px solid var(--gmw-rot);
  z-index:2;
  top:25%;
  left:50%;
  opacity:1;
  filter:blur(0px);
  transform:translateX(-50%);
  display:block;
  width: 60%;
  text-align:center;
}

.item-info p{
  position:absolute;
  bottom:-30px;
  filter:blur(30px);
  width:90%;
  left:50%;
  opacity:0 !important;
  transform:translateX(-50%);
  text-align:center;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.grid-item:hover .item-info p{
  bottom:0px;
  opacity:1 !important;
  filter:blur(0px);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.item-image {
  overflow:hidden;

}

.item-image>img {
  width: 100%;
  height: auto;
  object-fit: cover;
        transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.item-category {

  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 26px;
  top: 17px;
}

.item-category>span {
    background: var(--main, #d0003a);
  padding: 5px 5px;
  display:block;
  margin-right:3px;
  color: var(--gmw-grau);
  text-align: left;
  font-family:"Nexa-Black", sans-serif;
  font-size: 0.8em;
  letter-spacing:0px;
  text-transform: uppercase;
  position: relative;
  line-height:0.8em;
  -webkit-text-size-adjust: none;
}

.item-info>h4 {
  color: #ffffff;
  text-align: left;
  font-family: "Nexa-Black", sans-serif;
  font-size: 1.2em;
  text-transform: uppercase;
  position: absolute;
  left: 26px;
  top: 52px;
  width:80%;
}

.carousel-buttons {
    position: absolute;
    top: 0px;
    /* left: 0%; */
    /* transform: translateX(-50%); */
    display: flex;
    right: calc(5% + 120px);
  }

/*.text-slider .carousel-item{
    padding:10% 5% 0 5%;
}*/

span.noco{
    color: var(--gmw-grau);
    background-color: white;
}


/*********** TAB MENU *************/

.accordion-button:focus{
  border-color:transparent;
  box-shadow:none;
}

.accordion-button:after{
  display:none;
}

.accordion-button:not(.collapsed){
  box-shadow:none;
}

.accordion-header{
  border:none;
  position:relative;
}


#Parent-Akkordion .accordion-button{
  font-size:2.7em;
  font-family:"Nexa-Black", sans-serif;
  color:white;
  background-color:transparent;
  text-transform:uppercase;
  padding:0px;
  text-align:left;
  margin-bottom:20px;
  opacity:1;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
border:none;
}

#Parent-Akkordion .accordion-body {
  color:white;
  padding:0px;
  margin-bottom:100px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}


#Parent-Akkordion .show .accordion-body:before{
  content:"";
  width:100%;
  height:2px;
  background-color:var(--gmw-rot);
  display:block;
margin-bottom:30px;
transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}
#Parent-Akkordion .accordion-body:before{
  content:"";
  width:0%;
  height:2px;
  background-color:var(--gmw-rot);
  display:block;
margin-bottom:30px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

#Parent-Akkordion .accordion-item{
  background-color:transparent;
  border:none;
}
#Parent-Akkordion .accordion-button{
  opacity:1;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    margin-top:100px;
}

#Parent-Akkordion .accordion-button.collapsed{
  margin-top:60px;
}


#Parent-Akkordion .accordion-button.collapsed:before{
  content:"SHOW";
  font-family:"Nexa-Black", sans-serif;
  position:absolute;
filter:blur(30px);
opacity:0;
  top:30%;
  left:50%;
  transform:translateX(-50%);
  font-size:0.35em;
  color:var(--gmw-rot);
  letter-spacing:0px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}



/*#Parent-Akkordion .accordion-button.collapsed:hover:before{
  content:"+ SHOW";
  font-family:"Nexa-Black", sans-serif;
  position:absolute;
filter:blur(0px);
  opacity:1;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  font-size:0.35em;
  color:var(--gmw-rot);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
    letter-spacing:2px;
}*/
#Parent-Akkordion .accordion-button:hover:before {
    content: "CLOSE";
    font-family: "Nexa-Black", sans-serif;
    position: absolute;
    text-transform: none;
    filter: blur(0px);
    opacity: 1;
    top: 35px;
    left: 500px;
    transform: translateX(-50%);
    font-size: 0.35em;
    color: var(--gmw-rot);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    letter-spacing: 2px;
}

#Parent-Akkordion .accordion-button:before {
    content: "CLOSE";
    font-family: "Nexa-Black", sans-serif;
    position: absolute;
    text-transform: none;
    filter: blur(30px);
    opacity: 0;
    top: 35px;
    left: 500px;
    transform: translateX(-50%);
    font-size: 0.35em;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    letter-spacing: 2px;
}


#Parent-Akkordion .accordion-button.collapsed{
  opacity:0.5;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

#Parent-Akkordion .accordion-button.collapsed:hover{
  opacity:1;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}


#Parent-Akkordion .accordion-button span {
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    position: absolute;
    top: -30px;
    font-size: 0.4em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gmw-rot);
    font-family: "Nexa-Black", sans-serif;
}

#Parent-Akkordion .accordion-button a.button{
  font-size:0.35em;
  position:absolute;
  top:0px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
  right:0px;
}
#Parent-Akkordion .accordion-button strong{
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    margin-left:0.25em;
}
#Parent-Akkordion .accordion-button.collapsed strong{
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    margin-left:0.25em;
}
#Parent-Akkordion .accordion-button.collapsed:hover strong{
  color:var(--gmw-rot);
  margin-left:0.4em;
  letter-spacing:1px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
  transform:scale(1.1);
}


#Parent-Akkordion .accordion-button.collapsed a.button{
  top:0px;
  filter:blur(30px);
  right:-50px;
  opacity:0;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

#Parent-Akkordion .accordion-button.collapsed span {
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    position: absolute;
    top: -70px;
    transform:scale(2);
    filter:blur(30px);
    opacity:0;
    font-size: 0.4em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gmw-rot);
    font-family: "Nexa-Black", sans-serif;
}


#Parent-Akkordion .accordion-collapse.collapse.show .accordion-body{
  margin-bottom:100px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}
#Parent-Akkordion .nav-link{
  border-radius:0px;
  background-color:transparent;
  color:white;
  font-family:"Nexa-Black", sans-serif;
  font-size:1em;
  text-transform:uppercase;
  margin-right:20px;
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    border:2px solid transparent;
}

#Parent-Akkordion .accordion-item:first-child .accordion-button{
  margin-top:0px !important;
}

#Parent-Akkordion .nav-link:hover{
  border:2px solid var(--gmw-rot);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

#Parent-Akkordion .nav-link.active{
  border-radius:0px;
  background-color:var(--gmw-rot);
  color:var(--gmw-grau);
  font-family:"Nexa-Black", sans-serif;
  font-size:1em;
  text-transform:uppercase;
  margin-right:20px;
}

#Parent-Akkordion .tab-content {
    margin-top: 30px;
    margin-bottom: 80px;
}

#Parent-Akkordion .show{
  transition:0s;
}

#Parent-Akkordion .fade{
  transition:0s;
}
#Parent-Akkordion .fade.show.active{
  opacity:1;
}


#Parent-Akkordion .accordion-button.collapsed, #Parent-Akkordion .accordion-button{
  margin-top:0px;
}
#Parent-Akkordion video{
  filter:blur(10px)saturate(0);
  opacity:0.5;
  transform:scale(1);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
  width:auto;
  height:600px;
  position:absolute;
  top:0px;
  right:0px;
  z-index:0;
}

#Parent-Akkordion video.changevideo{
  filter:blur(10px)saturate(0);
  opacity:0.2;
  transform:scale(1);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}
#Parent-Akkordion .accordion-button.collapsed{
    margin-bottom: 100px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    left: 50%;
  
}

#Parent-Akkordion .accordion-button{
  top:70px;
  transform: translate(0%, 0%);
  left:40px;
  width:auto;
  height:100px;
}

#Parent-Akkordion .accordion-item {
    overflow: hidden;
    position: relative;
    height: 550px;
    margin: 20px;
    padding: 40px;
    width: calc(50% - 40px);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

#Parent-Akkordion .show .accordion-body:before{
  display:none;
}

#Parent-Akkordion .accordion-collapse{
  position:relative;
  margin-top:100px;
}

#Parent-Akkordion .accordion-item:hover video{
  filter:blur(0px)saturate(1);
  opacity:1;
  transform:scale(1.1);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

#Parent-Akkordion .accordion-item:hover video.changevideo{
  filter:blur(10px)saturate(0);
  opacity:0.2;
  transform:scale(1);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
}

#Parent-Akkordion .accordion-item:hover .accordion-button.collapsed{
  transform:translate(-50%, -50%)scale(1.5);
  opacity:1;
}

#Parent-Akkordion .accordion-button span{
  width:300%;
  top:-10px;
}

#Parent-Akkordion .nav-pills{
  display:flex;
  gap:0.5rem;
}

#Parent-Akkordion .nav-link, #Parent-Akkordion .nav-link.active{
  margin-right:0px;
  width:100%;
  border:2px solid var(--gmw-rot);
}

#Parent-Akkordion .accordion-item:hover .accordion-button.collapsed:before {
    content: "SHOW";
    font-family: "Nexa-Black", sans-serif;
    position: absolute;
    filter: blur(0px);
    opacity: 1;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.35em;
    color: var(--gmw-rot);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    letter-spacing: 2px;
}

#Parent-Akkordion .accordion-item:hover .accordion-button.collapsed {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
    text-shadow: 1px 1px 30px rgba(0, 0, 0, 1);
}

#Parent-Akkordion .show{
  opacity:0;
  animation:fadeInUpSlow 0.5s cubic-bezier(.52, 0, .1, .95) forwards;
}

  /**/

#Parent-Akkordion .accordion-header {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/* REFERENCES */
.references{
position: absolute;
    right: -50px;
    top: 50%;
    width: calc(51%);
    transform: translateY(-50%);
  z-index:2;
}

.blacklayer{
    position: absolute;
    right: -10%;
    height: calc(100% + 100px);
    top: -100px;
    width: 40%;
    background-color: var(--gmw-grau);
    z-index: 1;
}


/******** Footer **********/

footer h2,
footer h3,
footer h4,
footer h5,
footer p,
footer a,
footer em,
footer strong {
  color: white;
}

footer {
  width: 100%;
  height: auto;
  background-color: var(--gmw-grau);
  bottom: 0px;
  border-top:1px solid rgba(255,255,255,0.2);
}

footer h2 {
  color: var(--gmw-rot);
}

footer p {
  opacity: 0.7;
}

footer h4 {
  background-color: var(--gmw-rot);
  color: var(--gmw-grau);
  padding: 10px;
  font-family: "Nexa-Black", sans-serif;
  font-size: 1em;
  display: inline-block;
  margin-bottom: 30px;
}

footer strong,
footer a {
  color: var(--gmw-rot);
}

footer .footercontact a{
  color:var(--gmw-rot);
  letter-spacing:2px;
  margin-right:20px;
  text-transform:uppercase;
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;

}

footer .footercontact a:hover{
  color:white;
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

footer .footercontact{
  margin-bottom:30px;
}

footer .footercontact a i{
  color:var(--gmw-rot);
  margin-right:10px;
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

footer .footercontact a:hover i{
  transform:scale(1.2);
  color:var(--gmw-rot);
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

footer .row>*:first-child {}

footer ul {
  padding: 0;
  margin: 0;
}

footer ul li {
  padding: 0;
  margin: 0;
  display: inline-block;
  list-style: none;
  margin-right: 15px;
}

footer ul li a {
  text-transform: uppercase;
  color: white;
  opacity: 0.7;
}


/* Referenzen */
.desktop-referenzen{
  
}

.swiper.all, .swiper.rendering, .swiper.website, .swiper.interaktiv, .swiper.konzept, .swiper.print{
  display:none;
}

.swiper-slide { 
  width:40%
}

.swiper{
  padding-top:30px;
  padding-bottom:30px;
}



/*** CONTACT ****/

.contactcard strong{
  font-size:1.2em;text-transform:uppercase;letter-spacing:2px;color:var(--gmw-rot);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.contactcard p{
  color:white;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
.contact-image-two{
  position:absolute;
  top:0px;
  left:0px;
  opacity:0;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
.contact .col-md-12{
  overflow:hidden;
}
.contact .contactcard:hover .contact-image-two{
opacity:1;  
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
  transform:scale(1.1);
}

.contact .contactcard:hover strong{
  color:white;
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
.contact .contactcard .col-md-12{
      transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.contact .contactcard:hover .col-md-12{
  transform:translateY(-20px);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}

.contact .contactcard:hover p{
  color:var(--gmw-rot);
  transition: 0.7s cubic-bezier(.52, 0, .1, .95);;
}
.contact .contactcard.grayscaled img{
  filter:saturate(0);
}

.contact .contactcard.grayscaled strong,
.contact .contactcard.grayscaled i{
  color:white;
}
.text-content strong{
  text-transform:uppercase;
  letter-spacing:2px;
}

.contactswiper{
  display:none;
}



.hs-form *{
  font-family:"NexaBlack", sans-serif !important;
}



#CarouselContent .carousel-control-prev,#CarouselContent .carousel-control-next {
    top: unset;
    bottom: 0px;
    background-color: var(--gmw-rot);
    display: block;
    width: auto;
    padding: 10px;
    line-height: 0px;
  opacity:1;
}

#CarouselContent .carousel-control-prev{
  left:35px;
  right:unset;
  bottom:35px;
}
#CarouselContent .carousel-control-next{
  left:100px;
  right:unset;
  bottom:35px;
}

.text-slider .carousel-item{
  padding:0px;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  height:1.3rem;
}
}

#CarouselContent .carousel-item-next, #CarouselContent .carousel-item-prev, #CarouselContent .carousel-item.active {
    display: flex;
}

.carousel-control-next-icon {
    background-image: url('../images/next.svg');
}
.carousel-control-prev-icon {
    background-image: url('../images/before.svg');
}


#CarouselContent .carousel-inner {
    background-color: var(--gmw-grau);
    height: 100%;
    width: auto;
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: flex;
}


/*********** MEDIA QUERIES **********/
@media only screen and (max-width:1850px) {
  .content{
    width:100%;
  }

  .text-caption {
    left: calc(90px);
  }

  .info-box .info-box-text {
    width:60%;
  }
  
}

@media only screen and (max-width:1650px) {
.grid-item:hover .item-info:before {
    width: 90%;
}
  .grid-item:hover .arrow {
    right: calc(50% - 50px);
    width: 50px;
    height: 50px;
}

  .header-caption h2 {
    font-size:3.4em;
  }
.text-alternate h3{
  font-size:3.4em;
}

  .video-slider h3{
    font-size:3.4em;
  }
  #agentur{
    font-size:3.4em;
  }

  section.darkgrey h3 {
    font-size: 3.4em;
}

  .roller{line-height:4rem;height:4rem;}

  .content {
    width: 100%;
    padding: 80px;
    padding-top:150px;
    padding-bottom:150px;
  }
    .text-caption {
    left: calc(70px);
  }

    .logo {
        left: 110px;
    }

  .nav_scroll .logo{
    transform:scale(0.7);
    left:-10px;
    top:15px;
  }
.nav_scroll .logo:hover {
    transform: scale(0.7);
}

  footer .row>* {
    padding-left: 10px;
    padding-right: 10px;
}

  footer .row>*:first-child {
    padding-left: 40px;
    padding-right: 10px;
}
    footer .row>*:last-child {
      padding-left: 10px;
    padding-right: 40px;
}


}



@media only screen and (max-width:1500px){
    .info-box .info-box-text {
    width:70%;
  }
 .referenzen row{
   margin-left:30px;
   margin-right:30px;
 }
  .referenzen .col-md-4 {
    padding-left: 10px;
    padding-right:10px;
}
  .referenzen .grid-item{
    margin-bottom:20px;
  }
  #Parent-Akkordion .accordion-item{
    width:calc(100% - 40px);
  }
  #Parent-Akkordion video {
    filter: blur(0px) saturate(1);
    opacity: 1;
}
  #Parent-Akkordion .accordion-button.collapsed {
    margin-bottom: 100px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    left: 50%;
    opacity: 1;
    height: 100px;
    border: 2px solid var(--gmw-rot);
    backdrop-filter: blur(10px);
            padding-left: 40px;
        padding-right: 40px;
}

  #Parent-Akkordion .accordion-item:hover .accordion-button.collapsed:before {
    content: "SHOW";
    font-family: "Nexa-Black", sans-serif;
    position: absolute;
    filter: blur(0px);
    opacity: 1;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.35em;
    color: var(--gmw-rot);
    transition: 0.7s cubic-bezier(.52, 0, .1, .95);
    letter-spacing: 2px;
}

  .header-caption {
    width: 58%;
}

  .header-gradient {
    left: 54%;
}

  .grid-item .arrow {
    width: 30px;
    height: 41px;
}

    .grid-item:hover .arrow {
        right: calc(50% - 40px);
        width: 40px;
        height: 40px;
    }
}

@media only screen and (max-width:1400px) {

  #point-2, #point-5, #point-8, #point-11 {
  bottom:250px;
  left: 240px;
  animation: blurInDown 1s, pulseback 8s infinite;
  animation-delay: 1.5s;
}
#point-3, #point-6, #point-9, #point-12 {
top: 300px;
    left: 300px;
  animation-direction: reverse;
  animation: blurInDown 1s, pulse 8s infinite;
  animation-delay: 2s;
}
#point-4, #point-7, #point-10, #point-13 {
  top: 190px;
  left: 240px;
  animation: blurInDown 1s, pulseback 8s infinite;
  animation-delay: 2.5s;
}

  #info-box-2, #info-box-5, #info-box-8, #info-box-11 {
  bottom: 90px;
  left: 0px;
}

#info-box-3, #info-box-6, #info-box-9, #info-box-12 {
  top: 260px;
  left: 60px;
}

#info-box-4, #info-box-7, #info-box-10, #info-box-13 {
    top: 150px;
    left: 0px;
}

  

  .content {
    width: 100%;
    padding: 50px;
    padding-top:100px;
    padding-bottom:100px;
  }

    .text-caption {
    left: calc(50px);
  }

  .logo {
    left: 80px;
}

    .header-caption h2 {
    font-size:3em;
  }
.text-alternate h3{
  font-size:3em;

}

      .video-slider h3 {
        font-size: 3em;
    }
  #agentur{
    font-size:3em;
  }

    section.darkgrey h3 {
    font-size: 3em;
}

  section.referenzen h3{
    font-size:2.3em;
    margin-bottom:40px;
  }

  .media .col-md-4{
    width:50%;
  }

  .roller{line-height:4rem;height:4rem;}
    h2{
    font-size:1em;
  }
  h3{
    font-size:2.3em;
  }
  p{
    font-size:1.1em;
  }

  footer ul li {
    margin-right: 5px;
}

  footer .row>*:last-child{
  }

  footer .row>*:last-child a{
  }

  footer img {
    margin-top:20px;
  }


  .item-info>h4{
    font-size:1em;
  }

  .grid-item:hover .item-info:before {
    top:28%;
  }

  .contactcard{
  width:50%;
  padding-left:20px;
  padding-right:20px;
}
.contactcard .row{
  align-items:center;
}
  .contactcard .row .col-md-12{
    width:50%;
    margin-bottom:20px;  }
  .contactcard .row .col-md-12:last-child{
        padding-left: 10px !important;
        margin-top: 0px !important;
  }
  
}

@media only screen and (max-width:1280px) {

  #Parent-Akkordion .accordion-item:hover .accordion-button.collapsed {
    transform: translate(-50%, -50%) scale(1.1);
  }
  .nav_scroll .logo-container {
    left: 25px;
  }

  .nav_scroll .navigation {
    right: 25px;
  }

  .content {
    width: 100%;
    padding: 50px;
  }

  .video-slider .carousel-caption {
    margin: 70px
  }

    .referenzen .col-md-4 {
      width:50%;
}
  .hideandshow{
  animation:hideandshow50 1.5s ease-in-out forwards;
}

  .text-caption {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: calc(100px + 0%);
    padding-left:0px;
}

  footer .footercontact a {
    letter-spacing: 1px;
    margin-right: 10px;
}

  
}

@media only screen and (max-width:1080px) {

      #Parent-Akkordion .accordion-button.collapsed {
        display: block;
        text-align: center;
        width: 80%;
      }

.swipe-hint{
  position:absolute;
  top:100px;
  right:30px;
}

  .swiperreferenzen .swipe-hint{
    top:37px;
  }

  .swipe-hint span{
    display:block;
    color:var(--gmw-rot);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:1em;
    font-family:"Nexa-Black", sans-serif;
  }

    .swipe-hint span:after {
        content: "";
        position: absolute;
        right: -20px;
        top: 9px;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: var(--gmw-rot);
      animation:swipe 1.2s cubic-bezier(.52, 0, .1, .95) infinite; 
    }

  @keyframes swipe{
    from{right:-20px}
    to{right:-11px}
  }
  
  #menu {
    width: 100%;
    padding: 15px;
    padding-top: 30%;
    text-align: center;

  }

    .contact-menu {
        position: absolute;
        bottom: unset;
        display: block;
        text-align: left;
        left: 20px;
        top: 70px;
    }
#menu{
  text-align:right;

}
#menu .contact-menu a{
  display:block;
}
#menu{
  padding:0px;
  padding-top:150px;
        padding-right:35px;
}
#menu a {
    font-size: 2.3em;
}

#menu li{
  padding-left:0px;
  padding-right:0px;
}

#menu .mobile-dropdown {
padding:0px;
  position:relative;
  top:unset;
  left:unset;
  bottom:unset;
  right:unset;
    opacity: 1;
    filter: blur(0px);
    transform:translate(0px, 0px);
    background-color:var(--gmw-grau);
    text-align:right;

}
#menu .mobile-dropdown li{
  padding:5px;
  background-color:transparent;
  margin:0px;
}

#menu .mobile-dropdown li:hover{
  margin:0px;
}

#menu .mobile-dropdown li a {
    color: white;
    opacity: 0.7;
    letter-spacing: 2px;
  font-size:1.5em;
}

#menu li:hover .mobile-dropdown {
    right: 0px;
}

#menu a::after{
  display:none;
}

  .social-media {
    left: 10px;
    top: 15px;
  }

  .content {
    width: 100%;
    padding: 35px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .referenzen .content{
    padding:60px !important;
    padding-right:0px !important;
    padding-top:60px !important;
    padding-bottom:60px !important;
  }

  .filter{
    padding-right:60px;
  }

  header {
    display: block;
    height: auto;
  }

    .interactive-video {
        height: 450px;
        width: 100%;
        background-color: var(--gmw-grau);
        /* position: absolute; */
        /* margin-bottom: 400px; */
        /* overflow-y: visible; */
    }

    .header-caption {
        height: 450px;
        width: 100%;
        text-align: center;
        padding-bottom: 0px;
        padding-top: 170px;
    }

    .text-caption {
        position: absolute;
        left: 0px;
        padding: 50px;
        z-index: 99;
      top:80%;
    }

    .header-gradient {
        background: rgb(15, 15, 15);
        background: linear-gradient(180deg, rgba(15, 15, 15, 1) 0%, rgba(15, 15, 15, 1) 3%, rgba(15, 15, 15, 0) 100%);
        width: 100%;
        height: 340px;
        left: 0;
        top: 450px;
    }

  .dot-container, .interaction-point-group{
    display:none;
  }

  .video-slider .col-md-6 {
    width: 100%;
  }

  .video-slider .carousel-caption {
    margin: 30px;
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .video-slider .carousel-indicators {
    top: 45px;
    display: flex;
  }

  .carousel-indicators [data-bs-target] {
    margin-left: 7px;
    margin-right: 7px;
  }
    .interactive-video video {
        left: 30%;
        transform: translate(-50%, -50%) !important;
        height: 100%;
        top: 30%;
        z-index: 999999;
    }

  .desktop-referenzen{
    display:none;
  }
.swiper.all, .swiper.rendering, .swiper.website, .swiper.interaktiv, .swiper.konzept, .swiper.print{
  display:block;
}
.swiper.all.hide-project, .swiper.rendering.hide-project, .swiper.website.hide-project, .swiper.interaktiv.hide-project, .swiper.konzept.hide-project, .swiper.print.hide-project{
  display:none;
}
.content.video{
  padding-bottom:0px;
}

  .content.video .col-md-6{
    width:100%;
  }

  .content.video p{
    margin-bottom:50px;
  }
  .content.video .references {
     right: unset;
    top: unset;
    width: calc(100% + 70px);
    transform: translateX(-35px);
    z-index: 2;
    position: relative;
    padding:0px;
}

  .blacklayer{
    display:none;
  }

      .logo {
        left: 70px;
    }

  .nav_scroll .logo{
            left: -17px;
  }

    .navigation {
    right: 70px;
  }

  .item-info>h4{
    top:unset;
    bottom:1rem;
    margin-bottom:0px;
    width:90%;
  }
.item-info p{
  display:none;
}
  .item-category>span {
    padding: 3px 5px;
    padding-top:5px;
    margin-right: 0px;
  }

  .item-category{
    gap:5px;
    flex-direction: row;
    align-items: unset;
   justify-content: unset;
    width: 80%;
    flex-wrap: wrap;
}

  .filter-item h2, .filter-item.active h2, .filter-item h2:hover, .filter-item.active h2:hover {
    padding: 6px 10px;
    letter-spacing: 0px;
}

  .swiper-slide {
    width: 44%;
}
  
  .dot-container {
    top: 39%;
    left: 70px;
  }

    footer .footercontact a {
margin:0px;
}


  .text-alternate .col-md-6{
    width:100%;
  }

  .row.contact{
    display:none;
  }

  .contactswiper{
    display:block;
    padding:0px;
  }

  .contactswiper .contactcard{
    width:100%;
  }
.contactswiper .col-md-12{
  padding-left:20px !important;
  padding-right: 20px !important;
}
  .contactswiper .contactcard .row .col-md-12 {
    width:100%;
    padding-left:0px !important;
    padding-right:0px !important;
  }

    .contactswiper .contactcard .row .col-md-12:first-child{
      height:450px;
      overflow:hidden;
    }
  .contactswiper p{
    margin:0px;
  }
.contactswiper .contactcard .row .col-md-12:last-child{
  margin-bottom:0px;
}
  .contactcard.grey img {
  filter: saturate(0%);
}
.contactcard.grey strong {
  color: #fff;
}

.contactcard.grey i{
  color:#fff;
}

  footer .row>*{
        padding-left: 40px;
        padding-right: 40px;
    width:100%;
}
      footer .row>*:first-child {
        padding-left: 40px;
        padding-right: 40px;
    }
      footer .row>*:last-child {
        padding-left: 40px;
        padding-right: 40px;
    }

  footer .content{
    padding-top:60px;
    padding-bottom:60px;
  }

  footer .text-center
{
  text-align:left !important;
}

  footer .text-center p{
    margin-bottom:0px;
  }

      .header-caption h2 {
    font-size:2.3em;
  }
.text-alternate h3{
  font-size:2.3em;

}

      .video-slider h3 {
        font-size: 2.3em;
    }
  #agentur{
    font-size:2.3em;
  }

    section.darkgrey h3 {
    font-size: 2.3em;
}

  section.referenzen h3{
    font-size:2.3em;
  }


  .roller{
    line-height:2.6rem;
    height:2.6rem;
  }
  @keyframes slide {
    0% {
    top: 0;
}
25% {
    top: -2.6rem;
}
50% {
    top: -5.2rem;
}
72.5% {
    top: -7.8rem;
}}

  h3{
    font-size:2.3em;
  }

  .text-blackbox .col-md-6{
    width:100%;
  margin-bottom:30px;
  }

  .references{
    position:relative;
    width:100%;
    top:unset;
    right:unset;
    transform:translate(0);
        padding-left: 30px;
    padding-right: 30px;
  }

  
}

@media only screen and (max-width:860px) {
  .swiper-slide {
    width: 60%;
}
}

@media only screen and (max-width:767px) {

  #CarouselContent .carousel-inner {
    height: 400px;
  }
  .row>* {
    margin-bottom: 30px;
  }

  section.text-alternate .row>*:first-child{
    margin-bottom:0px;
  }

    .referenzen .col-md-4 {
      width:100%;
      margin-bottom:15px;
}

  .referenzen .content{
    padding:40px !important;
    padding-right:0px !important;
            padding-top:60px  !important;
        padding-bottom:60px  !important;
  }

  .filter{
    padding-right:40px !important;
  }

.hideandshow{
  animation:hideandshow100 1.5s ease-in-out forwards;
}

      .content {
        padding: 15px;
        padding-top:60px;
        padding-bottom:60px;
    }


  .media .col-md-4{
    width:50%;
  }
      .logo {
        left: 45px;
    }

  .navigation {
    right: 45px;
  }

}

@media only screen and (max-width:660px) {
    .swiper-slide {
    width: 80%;
}
}

@media only screen and (max-width:500px) {

  .filter-item h2, .filter-item.active h2, .filter-item h2:hover, .filter-item.active h2:hover{
         padding: 5px;
        font-size: 0.8em;
        padding-top: 6px;
        line-height: 0.8em;
    transform: translateY(-0px);
  }
a.button.back i {
    left: -15px;
}
  a.button i {
    right: -15px;
  }

      .grid-item:hover .arrow {
        top: 55%;
    }
.custom-cursor{
  visibility:hidden;
}

  
    .swipe-hint {
        top: 73px;
    }
      .col-md-7.references{
    padding-left: 0px;
    padding-right: 0px;
  }

  .siteheader{
    margin-top:70px;
  }
#menu a{
  font-size:1.5em;
}
  #menu .mobile-dropdown li a{
    font-size:1em;
  }

        .contactcard {
        padding:0px;
      }
      .contactswiper .contactcard .row .col-md-12 {
        width: 100%;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
      .contactswiper .contactcard .row .col-md-12:first-child {
        height: 350px;
        overflow: hidden;
        
    }

    footer .row>*:first-child {
        padding-left: 0px !important;
        padding-right: 0px;
    }
      footer .row>* {
        padding-left: 0px;
        padding-right: 0px;
    }
      footer .row>*:last-child {
        padding-left: 0px;
        padding-right: 0px;
    }


  #Parent-Akkordion .accordion-item{
    margin:0px;
    margin-bottom:20px;
    padding:10px;
    width:calc(100% - 10px);
    height:auto;
    min-height:300px;
  transition:none;
  }
  #Parent-Akkordion .accordion-header{
    position:absolute;
    height:100px;
        top: 35px;
        left: 10px;
    font-size:1.8em;
  transition:none;
  }
#Parent-Akkordion .accordion-button {
top:unset;
  left:unset;
  height:auto;
  font-size:1em;
  transition:none;
}
  #Parent-Akkordion .accordion-button span{
    top:-22px;
    font-size:0.5em;
  }
  #Parent-Akkordion .accordion-collapse {
    margin-top: 0px;
}
    #Parent-Akkordion .nav-link {
        padding: 5px;
        font-size: 0.8em;
        padding-top: 6px;
        line-height: 0.8em;
    }
  #Parent-Akkordion .nav-link.active {
    font-size:0.8em;
  }  
  #Parent-Akkordion .accordion-body{
    margin-top:45px;
    transition:none;
  }
  #Parent-Akkordion .accordion-item:hover .accordion-button.collapsed{
    width:100%;
  }
  #Parent-Akkordion .accordion-body{
    margin-bottom:0px;
  }
  #Parent-Akkordion .accordion-collapse.collapse.show .accordion-body{
    margin-bottom:0px;
    margin-top:45px;
    transition:none;
  }

#Parent-Akkordion .tab-content {
    margin-bottom: 0px;
}

  #Parent-Akkordion video {
    filter: blur(0px) saturate(1);
    opacity: 1;
    width: auto;
    height: 100%;
    z-index: 0;
}

  #Parent-Akkordion .show {
    opacity: 1;
    animation: none;
    margin-top:0px;
  }

    #Parent-Akkordion .accordion-collapse.collapse.show .accordion-body{
    transition:none;
  }

    #Parent-Akkordion .accordion-button.collapsed {
        transition: none;
        margin-bottom: 100px;
        position: absolute;
        top: 50%;
        transform: translate(calc(-50% - 10px), -50%);
        width: auto;
        height: 100px;
        left: 50%;
        text-align: center;
        display: block;
        opacity: 1;
        margin-top: 20%;
        text-shadow: 0px 0px 20px var(--gmw-rot);
        width: 83%;
        border: 2px solid var(--gmw-rot);
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter: blur(10px);
      padding-left:0px;
      padding-right:0px;
    }
#Parent-Akkordion .accordion-item:hover .accordion-button.collapsed {
        transition: none;
        margin-bottom: 100px;
        position: absolute;
        top: 50%;
        transform: translate(calc(-50% - 10px), -50%);
        width: auto;
        height: 100px;
        left: 50%;
        text-align: center;
        display: block;
        opacity: 1;
        margin-top: 20%;
        text-shadow: 0px 0px 20px var(--gmw-rot);
        width: 83%;
        border: 2px solid var(--gmw-rot);
  -webkit-backdrop-filter:blur(10px);
        backdrop-filter: blur(10px);
}
  #Parent-Akkordion .accordion-button:before{
    transition:none;
  }
  #Parent-Akkordion .accordion-button:hover:before{
    transition:none;
  }
  #Parent-Akkordion .accordion-button.collapsed:before {
    content: "SHOW";
    font-family: "Nexa-Black", sans-serif;
    position: absolute;
    filter: blur(0px);
    opacity: 1;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.56em;
    color: var(--gmw-rot);
    letter-spacing: 0px;
    display: block;
    text-align: center;
    transition:none;
}
  #Parent-Akkordion .accordion-item:hover .accordion-button.collapsed:before {
    content: "SHOW";
    font-family: "Nexa-Black", sans-serif;
    position: absolute;
    filter: blur(0px);
    opacity: 1;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.56em;
    color: var(--gmw-rot);
    letter-spacing: 0px;
    display: block;
    text-align: center;
    transition:none;
}
#Parent-Akkordion .accordion-body:before{
  display:none;
}

  #Parent-Akkordion .accordion-item:first-child .accordion-button {
    margin-top:0px !important;
}
    #Parent-Akkordion .accordion-item:first-child .accordion-button.collapsed {
    margin-top:20% !important;
}

  
.text-alternate a.button {
    margin-right: 0px;
}
  .logo-container {
    top: 15px;
    left: 20px;
    width: 160px;
  }

  .nav_scroll .logo-container {
    top: 15px;
    left: 20px;
    width: 40px;
  }

  .logo {
    width: 150px;
    left:20px;
    top:15px;
  }

  .nav_scroll .logo {
    width: 150px;
    left:0px;
    top:15px;
  }

  .navigation {
    top: 10px;
    right: 20px;
    width:auto;
  }

  .nav_scroll .navigation {
    top: 10px;
    right: 20px;
    width:auto;
  }


.nav_scroll{
  background-color:var(--gmw-grau);
}

.social-media {
    left: 10px;
    top: 15px;
}




  .content {
    width: 100%;
    padding: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

    .referenzen .content{
    padding:20px !important;
      padding-right:0px !important;
          padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

    .filter{
    padding-right:20px !important;
      margin-bottom:30px !important;
  }

  .row {
    margin-right: 0px;
    margin-left: 0px;
  }

  .row>* {
   /* margin-bottom: 70px; */
    padding: 0px;
  }

  .row>*:last-child{
    margin-bottom:0px;
  }

  a.button {
    display: block;
    text-align: center;
    margin-right: 0px !important;
  }

  h1,
  h3 {
    font-size: 1.8em;
  }

  h2 {
    font-size: 1em;
  }
  h3, h4, footer h4{
    margin-bottom:15px;
  }
  p{
    font-size:1em;
  }

  footer .row>*{
    margin-bottom:30px;
  }
  
  .video-slider .col-md-6{
    margin-bottom:0px;
  }
  .text-caption {
    position: absolute;
    top: 90%;
    transform: translateY(-50%);
    left: 0px;
    padding: 30px;
  }

  .header-caption {
    padding: 15px;
    height: 40vh;
  }
      .interactive-video {
        height: 60vh;
      }

      .header-gradient {
        top: 40vh;
    }

  .header-caption h2 {
    font-size: 1.8em;
  }

    .text-alternate h3 {
    font-size: 1.8em;
  }

  section.darkgrey h3{
    font-size:1.8em;
  }

    section.referenzen h3{
    font-size:1.8em;
    }

  .video-slider h3{
    font-size:1.8em;
  }

  .blackbox {
    padding: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

    .blackbox-after {
        bottom: 0;
        right: 0;
        transform: translateX(20px) translateY(20px) !important;
    }
.icon-box{
  display:none;
}
    .video-slider .carousel-caption {
        margin: 15px;
        margin-top: 90px;
        margin-bottom: 50px;
    }

  /*.video-slider p {
    display: none;
  }*/

  .video-slider video {
    width: auto;
    height: 100%;
  }

  .video-slider .text-blackbox .col-md-6{
    min-height:auto;
  }

  .video-slider .blackbox-after {
    width: 100%;
    height: 100%;
    bottom: 0px;
    left: 0px;
    transform: translateX(-20px) translateY(20px) !important;
}

  #agentur {
    font-size: 35px;
}

.roller {
    height: 39px;
    line-height: 39px;
}
  @keyframes slide {
  0% {
    top: 0;
  }

  25% {
    top: -40px;
  }

  50% {
    top: -80px;
  }

  72.5% {
    top: -120px;
  }

  }

          .content.video .references {
        width: calc(100% + 42px);
        transform: translateX(-21px);
        box-sizing:border-box;
    }

footer a{
}
footer ul li{
  margin:0px;
  display:block;
}
  footer .content{
  }

  footer .col-md-12.text-center p{
    font-size:1em;
    margin-top:30px;
    text-align:left !important;
  }

  footer .content{
    padding-bottom:15px;
  }

  .footercontact a{
    display:block;
  }




}



/*
.swiper-slide{
width:30%;
}

.swiper{
  padding-top:30px;
  padding-bottom:30px;
}

.swiper-slide .col-md-4{
  width:100%;
}

.swiper-slide .hideandshow{
  animation:hideandshow100 1.5s ease-in-out forwards;
}

.swiper-slide .hideandfade{
  animation:hideandfade100 1.5s ease-in-out forwards;
}
.swiper-slide.hideandshow{
  animation:none;
  width:28%;
  height:auto;
  display:block;
}
.swiper-slide.hideandfade{
  width:0px;
  height:0px;
  display:none;
  animation:none;
}*/



/*
.swiper #Parent-Akkordion .accordion-button.collapsed, .swiper #Parent-Akkordion .accordion-button {
  margin-top:0px;
}



.swiper.history .swiper-slide:before{
  position:absolute;
  content:"";
  width:100%;
  height:2px;
  background-color:white;
  top:calc(50% - 1px);
  opacity:0.3;
}
.swiper.history span {
    background-color: white;
    color: var(--gmw-grau);
    display: inline-block;
    padding: 15px 10px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 1;
    background-color: var(--gmw-grau);
    outline: 8px solid var(--gmw-grau);
    color: var(--gmw-rot);
    letter-spacing: 2px;
    font-family: "Nexa-Black";
    border: 2px solid var(--gmw-rot);
}


.swiper.history h4{
  position:absolute;
  top:20%;
  left:50%;
  transform:translateX(-50%);
  color:var(--gmw-rot);
  font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gmw-rot);
  font-family:"Nexa-Black", sans-serif;
  width:100%;
  text-align:center;
}

.swiper.history .line-dotted {
    position: absolute;
    content: "";
    width: 2px;
    height: 24%;
    border-right: 2px dotted var(--gmw-rot);
    left: 50%;
    bottom: 50%;
    z-index: 0;
}



.swiper.history p{
    text-align: center;
    font-size: 1em;
    width: 60%;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
}

.swiper-button-next, .swiper-button-prev {
    color: var(--gmw-rot);
}

.swiper.history .swiper-slide:nth-of-type(2n) h4{
  top:unset;
  bottom:20%;
}

.swiper.history .swiper-slide:nth-of-type(2n) .line-dotted{
  bottom:unset;
  top:50%;
}

.swiper.history .swiper-slide:nth-of-type(2n) p{
  top:unset;
  bottom:65%;
}*/

@media only screen and (max-width:450px){
  section.darkgrey .text-blackbox h3{
    font-size: 1.5em;
  }

  span.tag{
    margin-bottom:5px;
  }
}