@font-face {
  font-family: AtkinsonHyperlegibleBold;
  src: url('font/Atkinson-Hyperlegible-Bold-102.woff');
}

@font-face {
  font-family: AtkinsonHyperlegibleBoldItalic;
  src: url('font/Atkinson-Hyperlegible-BoldItalic-102.woff');
}


@font-face {
  font-family: AtkinsonHyperlegiblItalic;
  src: url('font/Atkinson-Hyperlegible-Italic-102.woff');
}


@font-face {
  font-family: AtkinsonHyperlegibleRegular;
  src: url('font/Atkinson-Hyperlegible-Regular-102.woff');
}


/* ALT*/


html,
body {
  margin: 0;
  padding: 0;
  background-color: white;
  overflow: hidden;
  font-family: AtkinsonHyperlegibleRegular;
  color: #5833ff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}


header,
main,
footer {
  transform: translateY(0);
  transition: transform 1s ease;

}



p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #5833ff;
}

h2 {
  font-family: AtkinsonHyperlegibleBold;
  font-size: 1.3rem;
  margin-bottom: 0;

}



.header {
  margin: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 7rem;
  align-items: center;
}

.header-mobil {
  display: none;
}

.about {
  padding: 0 2rem;
}

.logo-container {
  width: 25vw;
}


.logo {
  width: 100%;
}


.liste {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1rem;
}

.liste a {
  white-space: nowrap;
}


.inhalt-container {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.projekt-container {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding-inline: calc(50vw - 13vw);
}


.projekt {
  scroll-snap-align: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.7);
  opacity: 0.2;
  margin-bottom: 2rem;
  width: 25vw;
  cursor: pointer;
}

.projekt.aktiv {
  transform: scale(1);
  opacity: 1;
  cursor: default;

}

.tag-container {
  display: flex;
  gap: 0.5rem;
  padding-left: 0.5rem;
  flex-wrap: wrap;

}

.tag {
  background-color: #5833ff;
  color: white;
  padding: 0.2rem 1rem;
  font-size: 0.8rem;
  font-style: normal;
  width: max-content;
  border-radius: 2rem;
}

video {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.projekt-info {
  padding-left: 0.5rem;
}

.link {
  display: flex;
  gap: 0.5rem;
  align-content: last baseline;
}


.link:hover {
  transform: scale(1.01);
}

.client {
  margin-top: 0.5rem;
}

.client>a {
  display: inline-block;
}

.client>a:hover {
  transform: scale(1.03);
}

.technologie {
  margin-top: 1rem;
}

.technologie {
  font-size: 0.8rem;

}

.inaktiv {
  display: none;
}



.overlay {
  display: none;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow-y: scroll;
  justify-content: center;
}

.overlay-container {
  margin-inline: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.visible {
  display: flex;
  flex-direction: column;
}


.listen-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

footer {
  background-color: white;
}


.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem 2rem;
  font-size: 0.8rem;
  width: calc(100vw - 4rem);
}

.offen {
  transform: translateY(calc(-100vh + 5vh));
}


.back {
  display: none;
  width: 7vw;

}




/* Rechtliches */


.impressum-overlay,
.datenschutz-overlay {
  width: 100vw;
  background-color: white;
  flex-direction: column;
  display: none;
  transition: transform 0.4s ease;
  height: 100vh;
}


.sichtbar {
  display: flex;
}


.impressum,
.datenschutz {
  width: 50vw;
  margin-inline: auto;
  overflow-y: scroll;
  padding-inline: 2rem;
  height: 85%;
  margin-bottom: 2rem;
}

.impressum p,
.datenschutz p {
  margin-bottom: 0.5rem;
}

.impressum div,
.datenschutz div {
  margin-bottom: 2rem;
}



/* Technisches*/
*:focus-visible {
  outline: 2px solid #5833ff;
}


::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #5833ff;
  border-radius: 2rem;
}


* {
  scrollbar-width: thin;
  scrollbar-color: #5833ff transparent;
}

/* niedrige Fenster */

@media (max-height: 650px) {
  .inhalt-container {
    align-items: flex-start;
    overflow-y: auto;
  }
}

/*iPAD*/
@media (max-width: 1300px) {
 .logo-container {
    width: 45%;
  }
}


/*iPAD*/
@media (max-width: 1024px) {

  body {
    overflow-y: auto;
  }

  .header {
    margin: 2rem;
    gap: 0;
  }

  .logo-container {
    width: 100%;
  }

  .inhalt-container {
    overflow-y: auto;
  }

  .projekt {
    width: 40vw;
    margin-bottom: 0;
  }


}



/*Mobil*/

@media (max-width: 768px) {

  .header {
    display: none;
  }

  .header-mobil {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    position: relative;
  }

  .oben {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }


  .inhalt-container {
    margin: 1rem 0;
    align-items: flex-start;
    overflow-y: auto;
  }

  .logo-container {
    width: 45%;
  }

  .about-mobil {
    margin: 0;
    margin-top: 1rem;
  }

  .projekt-container {
    padding-inline: calc(50vw - 35vw);
  }


  .projekt {
    width: 70vw;
  }


  .overlay {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow-y: scroll;
    justify-content: start;
  }

  .overlay-container {
    gap: 2rem;
  }


  .listen-container {
    flex-direction: column;
    align-items: top;
    gap: 0.5rem;
  }

  .back {
    width: 20vw;
  }


  .impressum,
  .datenschutz {
    width: 90vw;
    padding-inline: 0;
  }


}