/* ===================== */
/*       FONTS         */
/* ===================== */
@font-face {
  font-family: 'Roboto Slab';
  src: url('../fonts/RobotoSlab-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('../fonts/RobotoSlab-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('../fonts/RobotoSlab-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

/* ===================== */
/*       ICONS         */
/* ===================== */
.gg-math-plus,
.gg-math-plus::after {
  display: block;
  box-sizing: border-box;
  background: currentColor;
  border-radius: 10px;
}
.gg-math-plus {
  margin-top: -2px;
  position: relative;
  transform: scale(var(--ggs, 1));
  width: 16px;
  height: 2px;
}
.gg-math-plus::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 16px;
  top: -7px;
  left: 7px;
}

.gg-screen {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1.5));
  margin: 20px;
  width: 22px;
  height: 14px;
  border: 2px solid;
  border-radius: 3px;
  margin-top: -4px;
}

.gg-clapper-board {
  display: block;
  position: relative;
  transform: scale(var(--ggs, 1));
  box-sizing: border-box;
  width: 22px;
  height: 18px;
  border: 2px solid;
  border-radius: 3px;
}
.gg-clapper-board::after,
.gg-clapper-board::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
}
.gg-clapper-board::before {
  width: 10px;
  height: 8px;
  border-left: 2px solid;
  border-right: 2px solid;
  left: 4px;
  top: -2px;
  transform: skewX(-40deg);
}
.gg-clapper-board::after {
  width: 22px;
  height: 2px;
  background: currentColor;
  top: 4px;
  left: -2px;
}

.gg-camera {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1.5));
  border: 2px solid;
  margin: 20px;
  border-radius: 3px;
  width: 18px;
  height: 12px;
  perspective: 24px;
}
.gg-camera::after,
.gg-camera::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
}
.gg-camera::before {
  border: 2px solid;
  border-left-color: transparent;
  transform: rotateY(-70deg);
  width: 8px;
  height: 8px;
  right: -7px;
  top: 0;
}
.gg-camera::after {
  width: 10px;
  height: 5px;
  border-top: 2px solid;
  border-right: 2px solid;
  top: -5px;
  right: 2px;
  border-top-right-radius: 2px;
}

.gg-screen::after,
.gg-screen::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  width: 10px;
  height: 2px;
  background: currentColor;
  top: 14px;
  left: 4px;
}
.gg-screen::before {
  width: 2px;
  height: 6px;
  top: 10px;
  left: 8px;
}
.gg-sun {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1.5));
  margin: 20px;
  width: 24px;
  height: 24px;
  background:
    linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px -6px/2px
      6px,
    linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px
      14px/2px 6px,
    linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat -8px 5px/6px
      2px,
    linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 14px
      5px/6px 2px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 2px;
  border: 6px solid transparent;
}
.gg-sun::after,
.gg-sun::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 2px;
  border-right: 4px solid;
  border-left: 4px solid;
  left: -6px;
  top: 5px;
}
.gg-sun::before {
  transform: rotate(-45deg);
}
.gg-sun::after {
  transform: rotate(45deg);
}



.gg-music-note {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs, 1.5));
  margin: 20px;
  width: 2px;
  height: 14px;
  background: currentColor;
}
.gg-music-note::after,
.gg-music-note::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border: 2px solid;
}
.gg-music-note::before {
  bottom: -4px;
  width: 8px;
  height: 8px;
  left: -6px;
  border-radius: 10px;
}
.gg-music-note::after {
  width: 10px;
  height: 6px;
  top: -4px;
  left: 0;
  border-radius: 2px;
  transform: skewY(-15deg);
}

.gg-heart,
.gg-heart::after {
  border: 2px solid;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  width: 10px;
  height: 8px;
  border-bottom: 0;
}
.gg-heart {
  box-sizing: border-box;
  position: relative;
  transform: translate(
      calc(-10px / 2 * var(--ggs, 1.5)),
      calc(-6px / 2 * var(--ggs, 1.5))
    )
    rotate(-45deg) scale(var(--ggs, 1.5));
  display: block;
}
.gg-heart::after,
.gg-heart::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
}
.gg-heart::after {
  right: -9px;
  transform: rotate(90deg);
  top: 5px;
}
.gg-heart::before {
  width: 11px;
  height: 11px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  left: -2px;
  top: 3px;
}

.gg-instagram {
  box-sizing: border-box;
  position: relative;
  display: block;
  float: left;
  margin-right: 6px;
  transform: scale(var(--ggs, 1));
  border: 2px solid transparent;
  box-shadow: 0 0 0 2px;
  border-radius: 4px;
  width: 15px;
  height: 15px;
}
.gg-instagram::after,
.gg-instagram::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
}
.gg-instagram::after {
  border: 2px solid;
  left: 2px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 100%;
}
.gg-instagram::before {
  border-radius: 3px;
  width: 2px;
  height: 2px;
  background: currentColor;
  right: 1px;
  top: 1px;
}

.vimeo-logo { 
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCI+PHBhdGggZD0iTSA0MSA1IEMgMzQuMjEwOTM4IDQuOTkyMTg4IDMwLjQ2ODc1IDguNzk2ODc1IDI4LjE2Nzk2OSAxNi4yMTA5MzggQyAyOS4zNzEwOTQgMTUuNzY1NjI1IDMwLjU3ODEyNSAxNS4yMTQ4NDQgMzEuNjcxODc1IDE1LjIxNDg0NCBDIDMzLjk3MjY1NiAxNS4yMTQ4NDQgMzQuNzM4MjgxIDE2LjA3MDMxMyAzNC40MTAxNTYgMTguNzI2NTYzIEMgMzQuMzAwNzgxIDIwLjM4NjcxOSAzMy42NDQ1MzEgMjMuMDY2NDA2IDMxLjY3MTg3NSAyNi4xNjQwNjMgQyAyOS42OTkyMTkgMjkuMTUyMzQ0IDI3Ljk4NDM3NSAzMCAyNyAzMCBDIDI1Ljc5Njg3NSAzMCAyNC44ODI4MTMgMjguMjY5NTMxIDIzLjg5ODQzOCAyMy42MjEwOTQgQyAyMy41NzAzMTMgMjIuMjkyOTY5IDIyLjgwNDY4OCAxOS4zMDQ2ODggMjEuOTI1NzgxIDEzLjY2NDA2MyBDIDIxLjE2MDE1NiA4LjQ2NDg0NCAxOC42MTMyODEgNS42Njc5NjkgMTUgNiBDIDEzLjQ2ODc1IDYuMTA5Mzc1IDExLjYzNjcxOSA3LjUzNTE1NiA4LjU3MDMxMyAxMC4xOTE0MDYgQyA2LjM3ODkwNiAxMi4xODM1OTQgNC4zMDA3ODEgMTMuNjIxMDk0IDIgMTUuNjEzMjgxIEwgNC4xOTE0MDYgMTguNDIxODc1IEMgNi4yNjk1MzEgMTYuOTg0Mzc1IDcuNDc2NTYzIDE2LjQyOTY4OCA3LjgwNDY4OCAxNi40Mjk2ODggQyA5LjMzNTkzOCAxNi40Mjk2ODggMTAuNzU3ODEzIDE4Ljg2MzI4MSAxMi4xODM1OTQgMjMuODQzNzUgQyAxMy4zODY3MTkgMjguMzc4OTA2IDE0LjY5OTIxOSAzMi45MTQwNjMgMTUuOTA2MjUgMzcuNDQ5MjE5IEMgMTcuNzY1NjI1IDQyLjQyOTY4OCAyMC4wNjY0MDYgNDQuODYzMjgxIDIyLjY5NTMxMyA0NC44NjMyODEgQyAyNy4wNzQyMTkgNDQuODYzMjgxIDMyLjMyODEyNSA0MC44ODI4MTMgMzguNTcwMzEzIDMyLjY5NTMxMyBDIDQ0LjY5OTIxOSAyNC45NDkyMTkgNDcuNzgxMjUgMTguNTM1MTU2IDQ4IDE0IEMgNDguMjE4NzUgOC4wMjczNDQgNDUuODE2NDA2IDUuMTA5Mzc1IDQxIDUgWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=') 50% 50% no-repeat;
  background-size: 100%;
}

/* ===================== */
/*   ALLGEMEINE STILE   */
/* ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab', serif;
  background-color: #000;
  color: #FFF;
  overflow: auto;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

p {
  padding-bottom: 40px;
}

.button{  
  padding: 1vh 3vw 1vh 4vw;
  color: #ffffff;
  border-radius: 5px;
  } 

/* ===================== */
/*    GALLERY STILE    */
/* ===================== */
.gallery-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  white-space: nowrap;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
	
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;
  width: max-content;
}

.gallery-item {
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vh;
  display: flex;
  color: #fff;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  overflow: hidden;
  will-change: transform;
}

/* Video Hintergründe & Inhalte */
.videohintergrund video {
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  object-fit: cover;
  pointer-events: none; /* Verhindert Interaktion */
}

.videoinhalt {
  position: absolute;
  padding: 20vh 10vw;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}

/* ===================== */
/*      INHALT         */
/* ===================== */
.welcome {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1020;
  text-align: center;
  font-weight: bold;
  font-size: calc(1.6rem + 0.1vw);
  min-width: 80vw;
}

.anfrage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1020;
  text-align: center;
  font-weight: bold;
  font-size: calc(1.8rem + 0.1vw);
  word-wrap: break-word;
  overflow-wrap: break-word;
}


.content {
  padding: 12vh 1vw 40vh 1vw;
  visibility: visible;
  display: block;
  z-index: 1000;
  min-width: 100vw;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  min-height: 100vh;
  height: auto;
  overflow: auto;
}

.profil {
  padding: 10vh 0vw 1vh 0vw;
  margin: 0vw;
  visibility: visible;
  display: block;
  z-index: 1000;
  min-height: 100vh;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  height: auto;
  overflow: auto;
}

/* ===================== */
/*      SERVICES       */
/* ===================== */
.services,
.neutrales,
.boxen {
  display: flex;
  justify-content: space-between;
  gap: 0;
  text-align: left;
}

.services {
  gap: 0;
}

.service {
  flex: 1;
  padding: 4vw;
  background-color: #BDFF1F;
  color: #000;
  border-radius: 5px;
  margin: 10px;
}

.profilbox {
  flex: 1;
  color: #ffffff;
 
}


.neutrales {
  /* Gleiche Struktur wie .services */
}

.neutral {
  flex: 1;
  padding: 4vw;
  background-color: rgba(23, 23, 23, 0.8);

  color: #fff;
  border-radius: 5px;
  margin: 10px;
}

.boxen {
  column-gap: 5px;
}

.boxe {
  flex: 1;
  padding: 4vw;
  background-color: rgba(20, 20, 20, 0.3);
  color: #fff;
  border-radius: 5px;
  margin-bottom: 5px;
}

.boxe h2 {
  color: #BDFF1F;
}

/* ===================== */
/*       HEADER        */
/* ===================== */
header {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 1rem;
  text-align: left;
  height: auto;
  z-index: 10000;
  color: #FFF;
 font-size: calc(0.5rem + 0.6vw);

}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: calc(1.5em - 0.5vw);
}

.logo,
.logo a,
a:visited,
a:active,
a:link {
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
}

/* Navigation */
.navigation ul {
 
  list-style: none;
  display: flex;
  gap: 20px;
}

.navigation a {
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
}

.navigation a:hover,
.navigation a:active {
  color: #BDFF1F;
}

/* ===================== */
/*      ABSCHNITTE      */
/* ===================== */
#home,
#anfragen,
#expertise,
#section1,
#section2,
#section3,
#section4,
#section5,
#imprint,
#datenschutz {
  background-color: #000;
}

#home video {
  opacity: 1;
}

/* ===================== */
/*       FOOTER        */
/* ===================== */
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  height: auto;
  z-index: 10000;
  color: #FFF;
  font-weight: normal;
  font-size: calc(0.6rem + 0.5vw);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.footer-left,
.footer-right {
  display: flex;
  gap: 20px;
}

.social-link,
.footer-link {
  text-decoration: none;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 2px;
}

.social-link:hover,
.footer-link:hover {
  text-decoration: none;
  color: #BDFF1F;
}

.footer-content a:active {
  color: #BDFF1F;
}

/* ===================== */
/*      RESPONSIVE     */
/* ===================== */
@media (max-width: 600px) {
  .footerbig {
    display: none;
  }
  .footersmall {
    display: block;
  }
  footer,
  header {
    z-index: 10000;
	display: block;
    background: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Für Safari */
  }
  .services,
  .boxen,
  .neutrales {
    flex-direction: column;
    align-items: center;
  }
  .service,
  .boxe,
  .neutral {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .footerbig {
    display: block;
  }
  .footersmall {
    display: none;
  }
}