body {
  background: #171717;
  margin: 0 auto;
  padding: 0;
}

html,body{ font-family:"Open Sans",sans-serif; }
h1, h2, h3, p{ font-family:"Open Sans",sans-serif;}

html, body { touch-action: manipulation; }

/* Text-Auswahl einfärben */
::selection {
  background: #fff;  /* rote Unterlegung */
  color: #000;          /* weiße Schrift auf rot */
}

::-moz-selection {
  background: #fff;
  color: #000;
}


/* Standard-Status für Lazy-Loading-Elemente */
.lazy {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Sobald das Bild/Video geladen ist */
.lazy.loaded {
    opacity: 1;
    transform: translateY(0);
}


.spacer-120 { height: 120px; width: 100%; display: block; }
.spacer-240 { height: 240px; width: 100%; display: block; }
.spacer-400 { height: 400px; width: 100%; display: block; }


.black-line-8 {
    border: none;
    border-top: 8px solid white; /* Linie mit 2px Stärke */
    margin-top: 80px;
    margin-bottom: 80px;
    width: 100%; /* Linie nimmt 50% der Breite des Containers ein */
    margin-left: auto; /* Zentriert die Linie */
    margin-right: auto;
    border-radius: 4px;
}



.header {
	display: flex;
	width: 100%;
	padding-bottom: 140px;
	flex-direction: column;
	align-items: flex-start;
	flex-shrink: 0;;
}


.title {
	display: block;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
    margin-top: 120px;
}

.title h1 {
    color: #fff;
	text-align: center;
	font-size: 180px;
	font-style: normal;
	font-weight: 300;
	line-height: 70%;
	height: auto;
}

.title p {
    color: #fff;
	text-align: center;
	font-size: 40px;
	font-style: normal;
	font-weight: 200;
	line-height: 110%;
}




.intro {
	display: flex;
	width: 60%;
	padding: 0 20% 10% 20%; 
	flex-direction: column;
	align-items: flex-start;
	gap: 80px; /* Abstand reduziert */
    margin-top: 4rem
}

.intro p {
    color: #fff;
	font-size: 24px;
	font-style: normal;
	font-weight: 350;
	line-height: 140%; /* 33.6px */
}

.intro a {
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
    font-weight: 400;
    color: black;
    background-color: #FFF600; /* Gelber Hintergrund */
    padding: 2px 4px; /* Fügt etwas Platz um den Text hinzu */
    border-radius: 4px; /* Leicht abgerundete Ecken für einen sanfteren Look */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.intro a:hover {
    background-color: black; /* Invertiert auf Schwarz beim Hover */
    color: white; /* Text wird weiß für Kontrast */
}

.intro h2 {
    font-size: 40px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    margin-bottom: 60px;
}

@media (max-width: 800px) {
    .title h1 {
    font-size: 100px;
    }
    .title p {
    font-size: 24px;
    }
    .intro p {
    font-size: 18px;
    }
    .intro {
    margin-top: 2rem
    }
}



/* –————————————————————————————————————————————————————————————————————————————————— */


.motif {
    display: flex;
    width: 100%;
    margin: 0 0 80px;
}


.motif-text {
    width: 40%;
    display: flex; /* Flexbox hinzufügen */
    flex-direction: column;
    padding: 0 30% 3% 30%;
    gap: 16px; /* Abstand zwischen den Elementen */
    margin-left: auto; /* Zentriert die Linie */
    margin-right: auto;
}

.motif-text p, 
.motif-text h2 {
    margin: 0; /* Standard-Margin entfernen */
}

.motif-text p {
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
}

.motif-text h2 {
    font-size: 60px;
    font-style: normal;
    font-weight: 300;
    line-height: 70%;
    margin-bottom: 60px;
}





/* box images————————————————————————————————————————————————————————————————————————— */
/* Desktop / Standard */
.box-image {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 80%;
  background: #171717;
  margin: 0 auto 5% auto;
  gap: 2%;
  padding: 0;
  position: relative;
}

.box-image img {
  width: calc(50% - 1%);
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Einzelbild auf Desktop zentrieren */
.box-image:has(img:first-of-type:last-of-type) { justify-content: center; }
.box-image:has(img:first-of-type:last-of-type) img {
  width: 60%;
  max-width: 800px;
}

/* Textzeile immer in eigener Reihe */
.box-image p {
  flex-basis: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 2rem;
  margin-top: 4rem;
  margin-bottom: 4rem !important;
}

/* box videos */
.box-video {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 80%;
    background: #171717;
    margin: 0 auto 5% auto;
    gap: 2%;
    padding: 0;
    position: relative;
}

/* Videos nebeneinander */
.box-video video {
    width: calc(50% - 1%);
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Wenn nur ein Video existiert → zentrieren */
.box-video:has(video:first-of-type:last-of-type) {
    justify-content: center;
}

.box-video:has(video:first-of-type:last-of-type) video {
    width: 60%;
    max-width: 800px;
}

.box-image img.lazy {
  opacity: 1 !important;
  transform: none !important;
}


/* ────────────────────────────────────────────────
   Mobile-Fix (<= 800px): Bilder + p untereinander
──────────────────────────────────────────────── */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }

  /* Motif nicht mehr als Flex-Row */
  .motif {
    display: block;
    width: 100%;
    margin: 0 0 4rem;
  }

  /* Box: kein Flex, volle Breite, zentriert */
  .box-image {
    display: block !important;      /* Flex deaktivieren */
    width: 90% !important;
    margin: 0 auto 40px !important;
    padding: 0 !important;
    overflow: hidden;               /* Sicherheitsgurt gegen Scrollen */
  }

  /* Bilder IMMER untereinander, volle Breite */
  .box-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    margin: 2rem auto;                /* zentriert, falls Restbreite */
  }

  /* Textzeile sichtbar unter den Bildern */
  .box-image p {
    display: block !important;
    width: 100% !important;
    text-align: center;
    font-size: 1.0rem;
    font-weight: 300;
    margin: 12px 0 0 0 !important;
    color: #fff;
    float: none;                    /* falls irgendwo float gesetzt war */
    clear: both;
  }

  /* Videos ebenfalls stapeln */
  .box-video {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 40px !important;
    overflow: hidden;
  }

  .box-video video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px;
    margin: 0 auto;
  }

  /* Breiten der Textbereiche schmaler */
  .intro, .motif-text {
    width: 90% !important;
    padding: 0 5% !important;
  }
}





/* —————————————————————————————————————————————GALLERY ——————————————————————————————————————————————————*/

.image-gallery {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #171717;

  /* sorgt dafür, dass alles untereinander gestapelt wird */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-track {
  display: flex;
  width: 100%;
  height: 100vh; /* Höhe der Bildfläche */
  transition: transform 0.8s ease-in-out;
}

.gallery-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* sichtbar nach Lazyload */
.gallery-track img.loaded {
  opacity: 1;
}

/* Pagination Dots jetzt UNTERHALB des Bildes */
.gallery-dots {
  position: relative;      /* nicht mehr absolut! */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 48px 0 40px 0;  /* Abstand zum Bild + Boden */
  width: 100%;
  background: transparent; /* optional: kein Hintergrund */
}

.gallery-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #595959;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.gallery-dots .dot.active {
  background-color: #fff;
}

/* Klickzonen (prev / next) */
.nav-zone {
  position: absolute;
  top: 0;
  width: 50%;
  height: 80vh; /* gleiche Höhe wie der Bildbereich */
  cursor: pointer;
  z-index: 5;
}

.nav-zone.left {
  left: 0;
}

.nav-zone.right {
  right: 0;
}


@media (max-width: 800px) {
    .gallery-track {
        width: 100%;
        height: 60vh; /* Höhe der Bildfläche */
    }
    .gallery-dots {
      padding: 24px 0 40px 0;  /* Abstand zum Bild + Boden */
    }
}



/* Buttons */
/* sorgt dafür, dass der Wrapper die volle Breite hat und seinen Inhalt zentriert */
.button-wrapper {
  display: flex;
  justify-content: center;   /* horizontal mittig */
  align-items: center;       /* vertikal in der eigenen Höhe */
  width: 100%;               /* wichtig, damit zentrieren wirken kann */
  margin: 0 auto 180px;         /* oben/unten Abstand, links/rechts auto */
  gap: 0;
}

/* Buttons-Gruppe (kann auch inline-flex sein) */
.buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
}



.button.primary,
.button.secondary {
    transition: all 0.3s ease-in-out; /* Sanfter Übergang */
}

.button.primary:hover,
.button.secondary:hover {
    transform: translateY(-3px); /* Hebt den Button leicht an */
}

.button.primary:visited {
    color: #fff;
    background: #000;
    border: 8px solid  #fff;
}

.button.secondary:visited {
    color: #fff;
    background: #000;
    border: 8px solid var #fff; /* Gelber Rand explizit setzen */
}



.button.primary {
	color: #fff;
    font-weight: 600;
	display: flex;
	height: 54px;
	padding: 0px 48px;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	text-decoration: none;
	border: 8px solid #fff;
	background: #000;
}

.button.primary:hover {
    color: #000;
    border: 8px solid #fff;
	background: #fff;
}


.button.secondary {
	color: #fff;
    font-weight: 600;
	display: flex;
	height: 54px;
	padding: 0px 48px;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	text-decoration: none;
	border: 8px solid #fff;
	background: #000;
}
.button.secondary:hover {
    color: #fff;
    border: 8px solid #fff;
	background: #000;
}



@media (max-width: 800px) {
    .button.primary {
    border: 4px solid #fff;
    }
    .button.primary:hover {
        border: 4px solid #fff;
    }
    .button.secondary {
        border: 4px solid #fff;
    }
    .button.secondary:hover {
        border: 4px solid #fff;
    }

}