:root {
        --primary-color: rgb(6,33,88);
       --background: rgb(255,255,255);
       --secondary-color: rgb(124, 234, 174);
       --tertiary-color: rgb(96,136,212);
       --warning: #aa5555;
}

@font-face {
    font-family: grifterbold;
    src: url(assets/grifterbold.otf);
    font-display: swap;
}

@font-face {
    font-family: PT Sans;
    src: url(assets/PTSans.ttf);
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: rgb(6,33,88);
}

h1 {
    font-family: 'grifterbold';
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

p {
    font-family: 'PT Sans';
    font-size: 1.2rem;
}

.header {
    background: #ffffff;
    padding: 0.5rem;
    padding-left: 2rem;
    display: flex;
    gap: 5%;
    opacity: 100%;
    transition: 0.2s ease;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header img {
    height: 60px;
}

.header .links {
    width: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transition: 0.5s; 
}

.header .links a, .footer a {
    font-family: 'grifterbold', sans-serif;
    text-decoration: none;
    font-size: 1.2rem;
    color: rgb(96,136,212);
    transition: 0.1s ease;
}

.header .links a:hover {
 color: var(--primary-color);
}

.burger {
  display: none;
  transition: 1s ease;
}

.burger.open .line:nth-child(1){
  transform: translateY(10px) rotate(45deg);
}

.burger.open .line:nth-child(2){
  background: transparent;
}

.burger.open .line:nth-child(3){
  transform: translateY(-10px) rotate(-45deg);
}

.line { 
  height: 4px; 
  width: 40px; 
  background: var(--tertiary-color); border-radius: 2px;
  display: block; 
  transition: 0.5s; 
  transform-origin: center; 
  margin-bottom: 6px;
}

.line:nth-child(1) { top: 10px; }
.line:nth-child(2) { top: 20px; }
.line:nth-child(3) { top: 30px; margin-bottom: 0; }

.roll {
  background: transparent;
}

.boden {
  display: none;
}

.title_text .alone {
    margin-top: 4rem;
    display: inline-block;
    font-size: 3rem;
    font-family: 'grifterbold';
    color: #fff;
} 

.title_text {
    background: linear-gradient(0deg, rgba(6, 33, 88, 0.7), rgba(6, 33, 88, 1)), url(assets/halle_bg-min.webp);
    background-size: cover;
    background-position: center;
    padding: 1rem;
    text-align: center;
    height: 400px;
    max-width: 100%;
}

@media only screen and (max-width: 600px){
    .title_text .alone {
        font-size: 2rem;
    }
}

.title_text .options {
    margin-top: 2rem;
}

.title_text .options .option {
    text-align: center;
    display: inline-block; 
    opacity: 0;
    animation: changeword 10s ease infinite;
    -webkit-animation: changeword 10s ease infinite;
    -moz-animation: changeword 10s ease infinite;
    -o-animation: changeword 10s ease infinite;
    font-family: 'grifterbold';
    font-size: 2rem;
    color: white;
    overflow: hidden;
}

@media only screen and (max-width: 600px){
    .header {
      position: sticky;
      top: 0;
      z-index: 2;
      flex-wrap: wrap;
      align-items: center;
    }
  
    .burger {
      display: block;
    }

    .title_text .options .option {
        font-size: 2.5rem;
        position: absolute;
        width: 90%;
        left: 5%;
    }
}

.title_text .options .option:nth-child(1) {
  animation-delay: 0s;
}
.title_text .options .option:nth-child(2) {
  animation-delay: 2s;
}
.title_text .options .option:nth-child(3) {
  animation-delay: 4s;
}
.title_text .options .option:nth-child(4) {
  animation-delay: 6s;
}
.title_text .options .option:nth-child(5) {
    animation-delay: 8s;
}
.title_text .options .option:nth-child(6) {
    animation-delay: 10s;
}

@keyframes changeword {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  
  5% {
    opacity: 1;
    transform: translateY(0);
  }
  
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  
  30% {
    opacity: 0;
    transform: translateY(50px);
  }
  
  80% {
    opacity: 0;
    transform: translateY(50px);
  }
}
@-webkit-keyframes changeword {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
    
    5% {
      opacity: 1;
      transform: translateY(0);
    }
    
    20% {
      opacity: 1;
      transform: translateY(0);
    }
    
    30% {
      opacity: 0;
      transform: translateY(50px);
    }
    
    80% {
      opacity: 0;
      transform: translateY(50px);
    }
}
@-moz-keyframes changeword {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
    
    5% {
      opacity: 1;
      transform: translateY(0);
    }
    
    20% {
      opacity: 1;
      transform: translateY(0);
    }
    
    30% {
      opacity: 0;
      transform: translateY(50px);
    }
    
    80% {
      opacity: 0;
      transform: translateY(50px);
    }
}
@-o-keyframes changeword {
    0% {
      transform: translateY(-50px);
      opacity: 0;
    }
    
    5% {
      opacity: 1;
      transform: translateY(0);
    }
    
    20% {
      opacity: 1;
      transform: translateY(0);
    }
    
    30% {
      opacity: 0;
      transform: translateY(50px);
    }
    
    80% {
      opacity: 0;
      transform: translateY(50px);
    }
}

.content {
  min-height: calc(100vh - 80px);
  background: white;
}

.content_card {
    background: white;
    padding: 2rem;
    font-family: 'PT Sans';
}

.content_card p {
    max-width: 60%;
}

.club_content {
  /*transform: rotate(-2deg);*/
  max-width: 800px;
}

.clubs {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*grid-row-gap: 60px;*/
  grid-column-gap: 20px;
}

@media only screen and (max-width: 600px){
.clubs {
  grid-template-columns: 1fr 1fr;
}

}

.club {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 150px;
  height: 150px;
}


.club h3 {
  text-align: center;
  font-size: 1rem;
  display: none;
}

.clubs img {
  max-width: 150px;
  height: 100px;
  object-fit: contain;
}

.dev {
  background: #353535;
  color: white;
  border-radius: 5px;
  max-width: 500px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.platform_links {
  background: white;
  border-radius: 5px;
  padding: 2px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.platform_links a {
  height: 40px;
}

.platform_links img {
  width: 40px;
  height: 40px;
}

.content_services {
    background: linear-gradient(0deg, rgba(6, 33, 88, 0.7), rgba(6, 33, 88, 1)), url(assets/services.webp);
    background-size: cover;
    background-position: center;
    padding: 2rem;
    display: none;
}

.content_services h1, .content_services p {
    color: white;
}

.content_services_services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.content_services .service {
    background: rgba(255,255,255,0.2);
    padding: 10px;
    border-radius: 5px;
}

.content_services .service h2 {
    font-family: 'grifterbold';
    font-size: 1.1rem;
    color: white;
}

.footer {
    background: var(--tertiary-color);
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer a {
    color: white;

}

@media only screen and (max-width: 600px) {
    .content_services{
      display: inherit;
    }

    .header {
        justify-content: space-between;
        padding-left: 5%;
        padding-right: 5%;
    }

    .header img {
        height: 40px;
    }

    .header .links {
        height: 0;
        width: 100%;
        overflow: hidden;
        display: block;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .header .links a {
      color: transparent;
    }

    .header .links.open {
      height: 50vh;
      width: 100%;
    }

    .header .links.open a {
      color: var(--tertiary-color);
    }

    .roll {
      display: block;
      position: absolute;
      top: 10px;
      right: 20px;
      width: 40px;
      height: 40px;
      z-index: -1;
      background: transparent;
      border-radius: 50%;
      transition: 0.2s ease;
    }

    .roll.open {
      background: var(--primary-color);
      animation: move 5s ease;
      animation-fill-mode: forwards;
    }

    .boden {
      border-bottom: solid 2px var(--primary-color);
      display: block;
      position: absolute;
      right: 20px;
      top: 48px;
      transition: 0.2s ease;
    }

    .boden.open {
      animation: grow 5s ease;
      animation-fill-mode: forwards;
    }

    @keyframes move {
      0%   { right: 10px; width: 40px; height: 40px; }
      100% { right: calc(90vw - 75px); width: 0; height: 0; margin-top: 40px; }
    }

    @keyframes grow {
      0%   { width: 10px; }
      100% { width: calc(90vw - 95px); }
    }

    .content_card p {
        max-width: 100%;
    }

    .content_services h2 {
        font-family: 'grifterbold';
        font-size: 0.9rem;
    }
}



/*ABOUT PAGE*/
.about img {
  width: 40vw;
}

.content.about {
  overflow: hidden;
}

.about .content_card {
  display: flex;
  gap: 50px;
  background: none;
  position: relative;
  box-sizing: border-box;
  transform: rotate(-2deg);
  margin-left: 2%;
}

.about .content_card .image, .about .content_card .text {
  z-index: 10;
  color: white;
}

.about .content_card .image, .about .content_card .text h1 {
  margin-bottom: 1.6rem;
}

.about .content_card .rectangle {
  width: 140vw;
  height: 100%;
  position: absolute;
  left: -100px;
  top: 80px;
  background: var(--primary-color);
  z-index: 0;
}

.about .content_card .rectangle.darker {
  background: var(--primary-color);
  transform: rotate(2deg);
  top: 70%;
  height: 30%;
}

.about .image h3 {
  font-family: 'grifterbold';
  color: white;
  margin-top: 10px;
}

@media only screen and (max-width: 600px) {
  .about img {
    width: 80vw;
  }


  .about .content_card {
    flex-direction: column;
    transform: rotate(0deg);
    margin-left: 0;
  }

  .about .content_card h1 {
    color: white;
  }

  .about .content_card .rectangle {
    transform: rotate(-2deg);
  }

  .about .content_card .image, .about .content_card .text h1 {
    margin-bottom: 0;
  }
}

/*REFERENZEN PAGE*/

.referenzen .content_card {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1)), url(assets/boden_clean.png);
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.referenzen .content_card .text {
  margin-bottom: 100px;
}

.referenzen .content_card .ref_list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.referenzen .content_card .ref_list .ref .quotation {
  font-size: 10rem;
  height: 70px;
  line-height: 100%;
  font-weight: 500;
  color: var(--primary-color);
}

.referenzen .content_card .ref_list .ref .spacer {
  grid-row-start: 3;
  height: 20px;
}

.referenzen .content_card .ref_list .ref {
  background: rgba(255,255,255,0.7);
  border-radius: 5px;
  display: grid;
  padding: 20px;
}

.referenzen .content_card .ref_list .ref .img_container {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.referenzen .content_card .ref_list .ref .ref_text {
  grid-column-start: 2;
  grid-row-start: 2;
}

.referenzen .content_card .ref_list .ref .ref_text h2 {
  font-family: "grifterbold";
  color: var(--primary-color);
}

.referenzen .content_card .ref_list .ref .ref_text p {
  max-width: 90%;
}
.referenzen .content_card .ref_list .ref .ref_text a {
  text-decoration: none;
  color: var(--tertiary-color);
}

.referenzen .content_card .ref_list .ref .ref_text p b {
  color: var(--primary-color);
}

@media only screen and (max-width: 430px) {
  .referenzen .content_card .ref_list .ref .img_container {
    display: none;
  }
}

/*UNDER CONSTRUCTION PAGE*/
.under_construction {
  background: url(assets/logistik.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
}

.under_construction .content_card {
  width: 50%;
}


/*CONTACT PAGE*/
.content.contact {
  background: url(assets/boden.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact_table img {
  width: 40px;
  padding-right: 20px;
}

.contact_table p {
  white-space: nowrap;
}

.contact_table a {
  text-decoration: none;
  color: var(--primary-color);
}

.contact_table td {
  padding: 0 5px 10px 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

.content_card.contact {
  display: flex;
  justify-content: center;
  background: none;
}

.contact_card {
  background: white;
  padding: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact_card h1 {
  margin-top: 10px;
}

/* SERVICES PAGE */
.content.services {
  overflow: hidden;
}

.services_wrapper {
  padding: 100px 4rem 100px 4rem;
  transform: rotate(-2deg) translateX(-20px);
  width: 110%;
}

.service .text p {
  max-width: 70%;
}

.services_wrapper h2 {
  font-family: 'grifterbold';
  font-size: 3rem;
}

.blue1 {
  background: var(--primary-color);
  color: white;
}

.blue2 {
  background: var(--tertiary-color);
  color: white;
}

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

.services_wrapper .service {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  max-width: 80%;
}

.services_wrapper .service img {
  width: 40%;
}

@media only screen and (max-width: 600px) {
  .services_wrapper h2 {
   font-size: 1.8rem;
  }

  .service .text p {
    max-width: none;
  }
 
  .services_wrapper .service {
   flex-direction: column;
   width: 60%;
  }

  .services_wrapper .service img {
    width: 100%;
    transform: none !important;
  }
}

 /* IMPRESSIONS PAGE */
 .content.impressions {
  overflow: hidden;
 }

 .services_wrapper .impression {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    max-width: 80%;
 }

 .impression video {
  max-height: 600px;
  max-width: 600px;
 }

 @media only screen and (max-width: 600px) {
  .services_wrapper .impression {
    flex-direction: column;
    align-items: baseline;
    max-width: 80%;
    padding-left: 0.5rem;
  }

  .impression video {
    max-height: 500px;
    max-width: 100%;
  }

  .impressions .services_wrapper {
    padding-left: 2.5rem;
  }
}