@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;600&family=Space+Mono&display=swap');

:root {
    --bg-color: white;
    --text-color: black;
    --screen-color: #333333;
    --phone-header: #4E4E4E;
    --on-opacity: 1;
    --nav-height: 133px;
  }
  
  .dark-mode {
    --bg-color: black;
    --text-color: white;
    --screen-color: #4E4E4E;
    --phone-header: black;
    --on-opacity: 0;
  }
  
body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
}

html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
}
.body-wrapper {
  overflow: hidden;
}

h2 {
  font-weight: 600;
}
h3, h4, h5, h6, i {
  font-weight: 300;
}

.clickable {
  cursor: pointer;
}
/* Navbar Styling */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--bg-color);
    border-bottom: 1px var(--text-color) solid;
    display: flex;
    align-items: center;
    height: var(--nav-height);
    z-index: 2;
    font-family: "Space Mono", sans-serif;
}

.logo {
    width: 400px;
    height: auto;
}

.navbar-img {
  display: none;
}

.dark-mode .navbar-img {
  filter: invert(1);
}

#text-only img{
  position: absolute;
  top: 30px;
  left: 139px;
  width: 217px;
}



.dark-mode #text-only img{
  filter: invert(1);
}

.white {
  display: none;
}

.dark-mode .black {
  display: none;
}

.dark-mode .white {
  display: block;
}

.links {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.links a, .links span {
    padding: 0 50px;
    font-size: 32px;
    text-decoration: none;
    color: var(--text-color);
    white-space: nowrap;
}

.burger-menu {
  display: none;
}

#mobile-menu {
  display: none;
}
/* Darkmode button */
  .buttons-wrapper {
    position: absolute;
    top: 115px;
    right: 33px;
    display: flex;
  }

  .lang-button {
      margin-right: 10px;
      padding: 7px 20px;
      border: 1px var(--text-color) solid;
      border-radius: 25px;
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: "Space Mono", sans-serif;
      cursor: pointer;
      transform: translateY(-1px);
      text-decoration: none;
  }
  .toggle--checkbox {
    display: none;
  }
  
  .toggle--checkbox:checked + .toggle--label:before {
    animation-name: switch;
    animation-duration: 350ms;
    animation-fill-mode: forwards;
  }
  .toggle--checkbox:checked + .toggle--label:after {
    transition-delay: 350ms;
    opacity: 1;
  }
  .toggle--label {
    width: 75px;
    height: 36px;
    background: var(--bg-color);
    border-radius: 75px;
    border: 1px solid var(--text-color);
    display: flex;
    position: relative;
    transition: all 350ms ease-in;
  }
  
  .toggle--label:before {
    animation-name: reverse;
    animation-duration: 350ms;
    animation-fill-mode: forwards;
    transition: all 350ms ease-in;
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid var(--text-color);
    top: 7px;
    left: 5px;
    position: absolute;
    border-radius: 20px;
    background: var(--bg-color);
    z-index: 3;
  }
  
  .off {
    position: relative;
    top: 3px;
    font-size: 20px;
    left: 9px;
    z-index: 1;
    opacity: calc(1 - var(--on-opacity));
  }
  
  .on {
    position: relative;
    top: 3px;
    font-size: 20px;
    right: 0;
    z-index: 1;
    opacity: var(--on-opacity);
  }
  
  
  @keyframes switch {
    0% {
      left: 5px; 
    }
  
    100% {
      left: 48px;
    }
  }
  @keyframes reverse {
    0% {
      left: 38px;
    }
    100% {
      left: 5px;
    }
  }

/* Spin button styling */
#spin-button {
  position: absolute;
  bottom: 0;
  right: 50px;
  width: 120px;
  height: 120px;
  font-family: "Space Mono", sans-serif;
  pointer-events: all;
}

.spin-text {
  position: absolute;
  font-size: 22px;
}

.spin-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.spin-right {
  top: 50%;
  right: -5px;
  transform: translateY(-50%) rotate(90deg);
}

.spin-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

.spin-left {
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(-90deg);
}

.spin-icon {
  height: 20px;
  position: absolute;
  top: 50px;
  left: 50px;
}

.dark-mode .spin-icon {
  filter: invert(1);
}

/* Home Styling */
#home {
  height: calc(100vh - var(--nav-height));
  margin-top: var(--nav-height);
  display: flex;
  position: relative;
  margin-bottom: 200px;
  z-index: 3;
}

#home-mobile {
  display: none;
}

#home .left, #home .right{
  width: 50%;
}
#home .left {
  display: flex;
  align-items: flex-start;
}
#home h1 {
  padding-left: 100px;
  width: 70%;
  font-size: 80px;
  margin-bottom: 0;
  font-weight: 600px;
  line-height: 1em;
  margin-top: 10%;
}

#home h2 {
  margin-top: 30px;
  padding-left: 100px;
  padding-right: 20px;
  font-weight: 300;
  font-size: 48px;
}

.home-icons {
  display: block;
  position: fixed;
  left: 42px;
  bottom: 10px;
  z-index: 1;
}

.icons-white {
  display: none;
}

.home-icons img {
  width: 20px;
  padding-right: 5px;
}

.dark-mode .icons-black {
  display: none;
}

.dark-mode .icons-white {
  display: block;
}

#home-logo {
  overflow: visible;
  pointer-events: none;
  width: 100%;
  max-height: 100%;
  padding: 50vh; /* hack for safari */
  margin: -50vh;
}

.dark-mode #home-logo {
  filter: invert(1);
}

.pin-spacer {
  pointer-events: none;

}


/* About Styling */

#about {
  display: flex;
  margin-bottom: 200px;
  align-items: flex-start;
}

#about .left {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#about .right {
  width: 60%;
}

#about .avatar {
  width: 550px;
  max-width: 80%;
}

#about h2 {
  font-size: 55px;
  width: 70%;
  margin-top: 0;
}

.mobile-title {
  display: none;
}

#about .text {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 25px;
}

#about p {
  width: 50%;
}

/* Angebot styling */
#angebot {
  margin-bottom: 200px;
}

.angebot-container {
  display: flex;
}

.angebot-container .left, .angebot-container .right {
  width: 50%;
}

.angebot-container .left {
  margin-left: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.angebot-container .right {
  display: flex;
  justify-content: center;
  align-items: center;
}

#angebot h2 {
  margin-left: 100px;
  font-size: 55px;
  width: 70%;
}

.angebot-container .text {
  font-size: 25px;
  display: flex;
  justify-content: flex-end;
  hyphens: auto;
}

.angebot-container p {
  width: 70%;
}

.angebot-container .tagcloud-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.angebot-container .tagcloud {
  z-index: 1;
}

/* projects styling */
#projects {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 200px;
}

#projects h2 {
  font-size: 55px;
}

#projects .device-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#tv {
  
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#tv .header {
  width: 100%;
  aspect-ratio: 800/27;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid var(--text-color);
  border-bottom: 0;
  background-color: var(--bg-color);
}
#tv .header .circle-container {
  margin-left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
}

#tv .header .circle-container .circle {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    background: transparent;
    height: 30%;
    margin-left: 5px;
    aspect-ratio: 1; 
}

.screen {
  width: 100%;
  background: var(--screen-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-color);
}

.screen video{
  width: 100%;
  
}
#phone {
  border-radius: 28px;
  padding: 10px;
  border: 1px var(--text-color) solid;
  background-color: var(--bg-color);
  width: 12%;
}

#phone .header {
  width: calc(100% + 2px);
  aspect-ratio: 100/9;
  border-top-left-radius: 21px;
  border-top-right-radius: 21px;
  background-color: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

#phone .header .circle {
  border-radius: 50%;
  background: var(--text-color);
  height: 40%;
  aspect-ratio: 1; 
}

#phone .footer {
  aspect-ratio: 100/9;
  background-color: var(--bg-color);
  border-bottom-left-radius: 21px;
  border-bottom-right-radius: 21px;
}

#phone .screen {
  aspect-ratio: 49/100;
}

#projects .text-container {
  display: flex;
  justify-content: flex-end;
  margin-right: 100px;
  margin-top: 100px;
}

#projects .text-container p {
  width: 40%;
  font-size: 25px;
}

/* Contact styling */
#contact {
  display: flex;
  width: 100%;
  margin-bottom: 200px;
  position: relative;
}

#contact .left {
  width: 40%;
  display: flex;
  justify-content: flex-end; 
}

/*#contact .left div {
  width: 40%;
}*/

#lottie-lampe {
  width: 80%;
}

.dark-mode #lottie-lampe {
  filter: invert(1);
}

#contact .right {
  width: 60%;
}

#contact h2 {
  width: 70%;
  font-size: 55px;
}

#contact .wrapper {
  margin-left: 30%;
}

#contact h3 {
  font-size: 39px;
  width: 100%;
  font-family: "Space Mono", sans-serif;
}

#contact .email {
  font-size: 25px;
  border: 2px var(--text-color) solid;
  border-radius: 25px;
  padding: 5px 10px;
  margin-bottom: 100px;
  text-decoration: none;
  color: var(--text-color);
  font-family: "Space Mono", sans-serif;
  display: flex;
  width: fit-content;
  align-items: center;
}

#contact .address {
  margin-top: 100px;
}
.email img {
  padding: 0 5px;
  transform: rotate(-90deg);
  height: 20px;
}

.dark-mode .email img {
  filter: invert(1);
}

#contact p {
  font-size: 25px;
  line-height: normal;
  margin: 0;
}

#spin-button-bottom {
  position: absolute;
  bottom: -150px;
  right: 50px;
  width: 120px;
  height: 120px;
  font-family: "Space Mono", sans-serif;
}

.spin-bottom-text {
  position: absolute;
  font-size: 22px;
}

.spin-bottom-top {
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.spin-bottom-right {
  top: 50%;
  right: 5px;
  transform: translateY(-50%) rotate(90deg);
}

.spin-bottom-bottom {
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

.spin-bottom-left {
  top: 50%;
  left: 5px;
  transform: translateY(-50%) rotate(-90deg);
}

.spin-bottom-icon {
  height: 20px;
  position: absolute;
  top: 50px;
  left: 50px;
}

.dark-mode .spin-bottom-icon {
  filter: invert(1);
}

/* footer styling */
footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px var(--text-color) solid;
  font-size: 14px;
  padding: 32px;
  align-items: flex-end;
  font-family: "Space Mono", sans-serif;
  z-index: 3;
  position: relative;
  background-color: var(--bg-color);
}

footer .links {
  width: fit-content;
  display: flex;
  flex-direction: column;
}
footer .links a {
  font-size: 14px;
  padding: 0;
  color: var(--text-color);
  text-decoration: underline;
}

footer .icons img{
  width: 20px;
}

footer i {
  padding: 0 5px;
}

footer p {
  margin: 0;
}

/* Animation styling */

#loadAnimation {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  background-color: black;
  top: 0;
  left: 0;
}

/*.fade-out {
  animation-name: fadeout;
  animation-duration: 1000ms;
}*/

.anim {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#animationHelper {
  display: none;
  position:fixed;
  top: 0;
  left: 0;
  width:100%; height:100%;
  margin:0 auto;
  z-index: 11;
  animation: expand 2s ease-in-out forwards;
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(30);
  }
}

#animationHelper {
  pointer-events: none;
}

/* Micro animations */

.animated-element {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate {
  opacity: 1;
  transform: translateY(0);
}

/* ablauf styling */
.panels-container {
  display: flex;
  width: calc(500vw + 110px); /* 5 panels * 100% */
  height: 100vh;
  overflow: visible;
  margin-bottom: 200px;
}

.panel {
  /*width: calc(100vw -20px);*/
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-right: 10px;
  margin-left: 10px;
}


.content-wrapper {
  width: 100%; /* Max width of content */
  height: 100%;
  display: flex;
  position: relative;
}

#panel2 .content-wrapper, #panel5 .content-wrapper {
  justify-content: flex-end;
}

.count {
  font-weight: 600;
  font-size: 155px;
  margin: 0;
  margin-left: 17%;
  margin-top: calc(20vh + var(--nav-height));
}

#panel2 .count, #panel5 .count {
  margin-left: 0;
  margin-top: calc(10vh + var(--nav-height));
}

#panel4 .count {
  margin-top: calc(10vh + var(--nav-height));
}

.mobile {
  display: none;
}

.section-header {
  font-weight: 600;
  font-size: 55px;
  margin: 0;
  margin-bottom: 2vh;
}


.ablauf-text {
  font-weight: 300;
  font-size: 25px;
}

.panel-content {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  margin-left: 20px;
  margin-top: calc(20vh + 100px + var(--nav-height));
  width: 30%;
}

#panel2 .panel-content, #panel5 .panel-content {
margin-right: 17%;
margin-top: calc(10vh + 100px + var(--nav-height));
}

#panel4 .panel-content {
margin-top: calc(10vh + 100px + var(--nav-height));
}

.navbar {
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px var(--text-color) solid;
display: flex;
align-items: center;
height: var(--nav-height);
z-index: 2;
font-family: "Space Mono", sans-serif;
}

#lottie-animation-1, #lottie-animation-2, #lottie-animation-3, #lottie-animation-4, #lottie-animation-5 {
  position: absolute;
  width: 30%;

}
#lottie-animation-1, #lottie-animation-3 {
  top: calc(2vh + var(--nav-height));
  right: 8%;

}
.dark-mode #lottie-animation-1, .dark-mode #lottie-animation-2, .dark-mode #lottie-animation-3, .dark-mode #lottie-animation-4, .dark-mode #lottie-animation-5 {
  filter: invert(1);
}
#lottie-animation-2, #lottie-animation-5 {
  top: calc(20vh + var(--nav-height));
  left: 8%;
}
#lottie-animation-4 {
  top: calc(17vh + var(--nav-height));
  right: 4%;
}

.cookie-banner {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background-color: var(--bg-color);
  width: 100%;
  padding: 40px 0;
  border-top: 1px var(--text-color) solid;
  text-align: center;
}

.cookie-banner p {
  width: calc(100% - 20px);
}

.cookie-banner .buttons button {
  margin: 10px;
  padding: 10px 20px;
  border: 1px var(--text-color) solid;
  border-radius: 25px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Space Mono", sans-serif;
  cursor: pointer;
}

.customer-logos, .mobile-customer-logos {
  filter: grayscale(100%);
  width: 100%;
}

.customer-logos .row-one, .customer-logos .row-two{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.customer-logos .row-two, .mobile-customer-logos .row-three, .mobile-customer-logos .row-two {
  margin-top: 80px;
}


.customer-logos img {
  height: 105px;
  width: auto;
}

.dark-mode .customer-logos, .dark-mode .mobile-customer-logos{
  filter: grayscale(100%) invert(1);
}

.mobile-customer-logos  {
  display: none;
}

.mobile-customer-logos .row-one, .mobile-customer-logos .row-two, .mobile-customer-logos .row-three {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.mobile-customer-logos .row-three {
  justify-content: center;
}

.mobile-customer-logos img {
  height: 70px;
  width: auto;
}



@media only screen and (max-width: 1330px) {
  #home h2 {
    font-size: 36px;
  }

  
}

@media only screen and (max-width: 1290px) {
  .panel-content {
    width: 50%;
  }

  #lottie-animation-2, #lottie-animation-5 {
    top: calc(30vh + var(--nav-height));
    left: 2%;
  }

  #lottie-animation-4 {
    top: calc(37vh + var(--nav-height));
    right: -2%;
  }
}

@media only screen and (max-width: 1085px) {
  :root {
    --nav-height: 83px;
  }
  .section-header {
    font-size: 32px;
    margin-left: 1rem;
  }
  .ablauf-text {
    font-size: 19px;
  }
  .count  {
    font-size: 90px;
  }

  #panel2 .count, #panel4 .count, #panel5 .count {
    font-size: 90px;
  }

  .panel-content {
    margin-top: calc(20vh + var(--nav-height) + 58px);
  }

  #panel2 .panel-content, #panel4 .panel-content, #panel5 .panel-content {
    margin-top: calc(10vh + var(--nav-height) + 58px);
  }


}
@media only screen and (max-width: 767px) {
  .panel-content, #panel2 .panel-content, #panel4 .panel-content, #panel5 .panel-content  {
    width: calc(100% - 35px);
    margin-top: 0;
  }
  #lottie-animation-1, #lottie-animation-2, #lottie-animation-3, #lottie-animation-4, #lottie-animation-5 {
    position: relative;
    top: 0;
    right: 0;
    width: 90%;
    /*max-height: 50%;*/
  }

  .count, #panel2 .count, #panel4 .count, #panel5 .count {
    margin-left: 0;
    margin-top: 0;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: flex;
    align-items: flex-end;
    margin-top: calc(var(--nav-height) + 20px);
  }

  #panel2 .content-wrapper, #panel5 .content-wrapper {
    justify-content: unset;
  }

  .panel {
    margin-left: 0;
    margin-right: 30vw;
   }

   #panel5 {
      margin-right: 0;
   }

  .panels-container {
    width: 620vw;
  }


}
@media only screen and (max-height: 770px) and (max-width: 550px){
  .panel-content, #panel2 .panel-content, #panel4 .panel-content, #panel5 .panel-content  {
    width: calc(100% - 10px);
  }
 .ablauf-text {
   font-size: 14px;
   margin: 0;
 }

 #lottie-animation-1, #lottie-animation-2, #lottie-animation-3, #lottie-animation-4, #lottie-animation-5 {
   width: 70%;
   align-self: center;
 }
 
 #home .left svg {
  width: 70%;
}
}
/* values styling */
#values {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 200px;
}

#values h2 {
  font-size: 55px;
}

.values-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: 100px;
}

.values-wrapper img {
  height: 15%;
}

.dark-mode .values-wrapper img {
  filter: invert(1);
}

.values-wrapper h3 {
  font-size: 39px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}

.values-wrapper p {
  font-size: 25px;
}

.values-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  margin: 0 2.5% 0 2.5%;
}



/*#ablauf::-webkit-scrollbar {
  display: none;
}*/

/*#ablauf div {
  display: inline-block;
}*/

/* cursor styling */
.cursor {
  display: none;
  width: 80px;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9;
}

.dark-mode .cursor {
  filter: invert(1);
}

/* contact button */
.contact-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-family: "Space Mono", sans-serif;
  pointer-events: all;
  z-index: 2;
  
}

.contact-button a {
    font-size: 25px;
    border: 2px var(--text-color) solid;
    border-radius: 25px;
    padding: 10px 20px;
    margin-bottom: 100px;
    text-decoration: none;
    color: var(--text-color);
    font-family: "Space Mono", sans-serif;
    background-color: var(--bg-color);
}

.contact-button-small {
  position: fixed;
  bottom: 30px;
  right: 10px;
  pointer-events: all;
  z-index: 2;
  background-color: var(--bg-color);
  border: 2px var(--text-color) solid;
  padding: 10px 10px 5px 8px;
  border-radius: 100%;

  }
  .contact-image {
    width: 50px;
    height: auto;
  }
.dark-mode .contact-button-small img {
  filter: invert(1);
}
@media only screen and (max-width: 1881px){
  
  #about p {
    width: 70%;
  }
}
@media only screen and (max-width: 1643px) {
  .logo {
    width: 300px;
  }

  #text-only img{
    top: 38px;
    left: 104px;
    width: 163px;
  }

  .links a, .links span {
    padding: 0 30px;
    font-size: 24px;
  }

  .buttons-wrapper {
    right: 28px }

  #about p {
    width: 100%;
    margin-right: 100px;
  }
}
@media only screen and (max-width: 1501px) {
  #contact h2 {
    width: 90%;
  }
}

@media only screen and (max-width: 1290px) {
  .footer-address{
      display: none;
  }
  
  #home h1 {
    font-size: 60px;
  }
}

@media only screen and (max-width: 1267px){
  #angebot h2 {
    margin-left: 0;
    width: 100%;
  }
}

@media only screen and (max-width: 1160px){
  .logo  {
    width: 200px;
  }
  #text-only img{
    position: absolute;
    top: 21px;
    left: 69px;
    width: 109px;
  }
}
/* mobile menu */
@media only screen and (max-width: 1085px) {

  #about .avatar {
    margin-top: 40px;
  }
  #ablauf {
    border-top: 1px solid var(--text-color);
  }
  
  #spin-button {
    right: calc(50% - 60px);
    bottom: 25px;
  }

  #spin-button-bottom {
    right: calc(50% - 60px);
  }
  :root {
    --nav-height: 83px;
  }
  .navbar {
    justify-content: space-between;
  }

  .navbar .links {
    display: none;
  }
  
.buttons-wrapper {
  top: 65px;
}


.burger-menu {
  display: block;
  background-color: transparent;
  border: none;
  padding: 12px;
  margin-right: 21px;
}

.dark-mode .burger-menu {
  filter: invert(1);
}

  .open-state {
    display: none;
  }

  .mobile-menu-active #mobile-menu {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    color: var(--text-color);
    position: fixed;
    height: calc(100vh - var(--nav-height));
    width: 100vw;
    top: var(--nav-height);
    left:0;
    z-index: 4;
  }
  .mobile-menu-active #mobile-menu .menu-option{
    border-top: 1px var(--text-color) solid;
    padding-left: 25px;
    white-space: nowrap;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: var(--bg-color);
  }

@keyframes fanOut2 {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(100%);
  }
}

@keyframes fanOut3 {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(200%);
  }
}

@keyframes fanOut4 {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(300%);
  }
}

@keyframes fanOut5 {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(400%);
  }
}

.mobile-menu-active #mobile-menu .menu-option:nth-child(2) {
  animation: fanOut2 0.5s ease 0.4s forwards;
}

.mobile-menu-active #mobile-menu .menu-option:nth-child(3) {
  animation: fanOut3 0.5s ease 0.3s forwards;
}

.mobile-menu-active #mobile-menu .menu-option:nth-child(4) {
  animation: fanOut4 0.5s ease 0.2s forwards;
}

.mobile-menu-active #mobile-menu .menu-option:nth-child(5) {
  animation: fanOut5 0.5s ease 0.1s forwards;
}
  .mobile-menu-active #mobile-menu .last {
    border-bottom: 1px var(--text-color) solid;
  }

  .mobile-menu-active .navbar {
    /*background-color: var(--text-color);*/
    border-bottom: none;
  }

  .mobile-menu-active .buttons-wrapper {
    display: none;
  }

  

  .mobile-menu-active .closed-state {
    display: none;
  }

  .mobile-menu-active .open-state {
    display: block;
    color: var(--text-color);
    font-size: 32px;
  }

  .home-icons, .dark-mode .home-icons {
    display: none;
  }

  #angebot {
    border-top: 1px var(--text-color) solid;
  }

  .angebot-container {
    flex-direction: column;
    align-items: center;
  }

  .angebot-container .left {

    width: 90%;
    margin: 0 30px;
  }



  #angebot h2 {
    font-size: 48px;
    margin-left: 40px;
  }

  #angebot .text {
    width: 80%;
  }
  

  #about {
    border-top: 1px var(--text-color) solid;
  }


  #about h2 {
    font-size: 48px;
    margin-top: 40px;
  }

  .pc-title {
    display: none;
  }

  .mobile-title {
    display: block;
    margin-left: 40px;
  }

  #angebot .mobile-title {
    margin-top: 60px;
  }

  #about .pc-title {
    display: block;
  }

  #about .mobile-title {
    display: none;
  }

  

  #contact {
    border-top: 1px var(--text-color) solid;
    flex-direction: column;
  }

  #contact .mobile-title {
    margin-top: 40px;
    font-size: 48px;
    width: 80%;
    text-align: left;
  }

  #lottie-lampe {
    width: 60%;
  }

  #contact .left, #contact .right {
    width: 100%;
    justify-content: center;
  }

  #contact .wrapper {
    margin-bottom: 50px;
  }

  #contact .email {

    border: 1px var(--text-color) solid;
  }



  
  footer {
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    text-align: center;
  }

  footer .icons img {
    width: 25px;
  }

  footer .icons {
    margin-bottom: 35px;
  }

  footer p, footer a {
    line-height: 150%;
  }
  
  footer .links {
    flex-direction: column-reverse;
  }

  footer .links p {
    margin-top: 20px;
  }

  #home {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-end;
  }

  #home .left, #home .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #home h1 {
    margin-top: 50px;
    width: 80%;
    /*font-size: 40px;*/
    padding: 0;
  }

  #home h2 {
    width: 80%;
    font-size: 24px;
    padding: 0;
  }

  #values h2 {
    font-size: 48px;
  }

  .values-wrapper h3 {
    font-size: 25px;
  }



  .values-wrapper {
    flex-direction: column;
  }

  .values-panel {
    width: 100%;
    margin-bottom: 50px;
    margin-left: 0;
  }

  .values-panel img {
    width: 20%;
  }

  .values-panel p {
    width: 80%;
  }

  #projects {
    border-top: 1px var(--text-color) solid;
  }

  #projects h2 {
    font-size: 48px;
    margin-left: 40px;
    margin-top: 40px;
  }

  #projects .text-container {
    margin-right: 10px;
    margin-top: 20px;
  }

  #projects .text-container p {
    font-size: 25px;
    width: 80%;
    
  }

}

@media only screen and (max-width: 1445px) {
  .angebot-container p {
    width: 100%;
  }
}


@media only screen and (max-width: 767px) {
  #text-only {
    display: none !important;
  }

  .navbar-img {
    display: block !important;
  }
  .pin-spacer-heroTrigger {
    display: none !important;
  }

  #home-mobile {
    height: calc(100vh - var(--nav-height));
    margin-top: var(--nav-height);
    margin-bottom: 200px;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  #home-mobile {
    width: 100%;
    display:  flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  #home-mobile .background-image {
    position: absolute;
    right: 0;
    width: 200%;
    transform: translateX(60%);
    z-index: -1;
    overflow: hidden;
  }

  .dark-mode #home-mobile .background-image {
    filter: invert(1);
  }

  #home-mobile h1 {
    margin-top: 50px;
    width: 80%;
    font-size: 60px;
    padding: 0;
  }

  #home-mobile h2 {
    width: 80%;
    font-size: 24px;
    padding: 0;
  }
  #contact .email {
    font-size: 19px;
  }

  .email img {
    height: 13px;
  }
  #contact p {
    font-size: 19px;
  }
  #contact h3 {
    font-size: 24px;
  }


  #projects {
    align-items: unset;
  }

 

  #projects .device-container #tv {
    display: none;
  }

  #projects .device-container #phone {
    width: 60%;
  }

  #about {
    flex-direction: column;
  }

  #about .left, #about .right {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #about .left {
    justify-content: flex-end;
    margin-bottom: 40px;
  }

  #projects .text-container p {
      font-size: 19px;
      width: 90%;
      margin-right: 10px;
  }

  #about .avatar {
    width: 70%;
    margin-right: 5%;
    max-width: unset;
  }

  #about .pc-title {
    display: none;
  }

  #about .mobile-title {
    display: block;
  }

  .angebot-container {
    flex-direction: column-reverse;
  }

  #angebot .text {
    font-size: 19px;
    width: 100%;
  }

  #angebot .mobile-title {
    margin-top: 40px;
  }

  #about .text {
    width: 90%;
  }
  #about p {
    font-size: 19px;

  }

  .values-wrapper p {
    font-size: 19px;
  }


}

@media only screen and (max-width: 622px){
  .customer-logos {
    display: none;
  }

  .mobile-customer-logos {
    display: block;
  }
}

@media only screen and (max-width: 562px){
  #about p {
    margin-right: 0;
  }
}

@media only screen and (max-width: 458px) {
  #home-mobile h1 {
    font-size: 50px;
  }

  #angebot h2 {
    font-size: 32px;
  }

  #projects h2 {
    font-size: 32px;
  }

  #about h2 {
    font-size: 32px;
  }

  #values h2 {
    font-size: 32px;
  }
  
  #contact .mobile-title {
    font-size: 32px;
  }

  #lottie-lampe {
    width: 80%;
  }

  #contact .wrapper {
    margin-left: 20%;
  }
}

@media only screen and (max-width: 368px) {
  #home-mobile h1 {
    font-size: 40px;
  }

  #home-mobile h2 {
    font-size: 20px;
  }
}

#lottie-animation-4 svg {
  overflow: visible;
}

.pin-spacer-heroTrigger {
  opacity: 0.99 !important;
}