@charset "UTF-8";
/* CSS Document */
body {
  font-family: 'SK-B-Regular', sans-serif;
}
body.no-scroll {
  overflow: hidden;
}
.ss04, .ss04 {
  font-feature-settings: "ss04";
}
.ss05 {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "ss04";
  -webkit-font-feature-settings: "c2sc", "ss04";
  font-feature-settings: "c2sc", "ss04";
}
.lm {
  margin-top: 80px;
  margin-bottom: -30px;
}
.lm2 {
  margin-top: 72px;
  margin-bottom: -53px;
}
.lm3 {
  margin-top: 13px;
}
.fs {
  font-size: 16px;
}
.fs2 {
  font-size: 48px;
}
.topright {
  position: absolute;
  top: 9px;
  left: 14px;
  height: 100%;
  font-size: 14px;
}
.topright2 {
  position: fixed;
  top: 8px;
  right: 16px;
  font-size: 16px;
  z-index: 1;
}
.topright3 {
  position: absolute;
  top: 9.7px;
  right: 59px;
  font-size: 14px;
  z-index: 1;
}
.activel {
  font-weight: 600;
  color: black;
  text-decoration: none;
}
.box {
  background-color: white;
  width: 100%;
  padding: 30px;
  margin: auto;
  color: black;
}

@media (max-width: 768px) {
 .box {
  background-color: white;
  width: 100%;
  padding: 30px;
  margin: auto;
  color: black;
}
}


.box2 {
  background-color: black;
  width: 100%;
  padding: 30px;
  margin: auto;
  color: white;
}




.font {
  font-family: "SK-B-Regular", sans-serif;
  color: black;
}
.font2 {
  font-family: "SK-B-SemiBold", sans-serif;
  color: black;
}
.fontw {
  font-weight: 400;
}
.fontw2 {
  font-weight: 600;
}
.fontls {
  letter-spacing: 1.5px;
  word-spacing: 0px;
}
.fontls2 {
  letter-spacing: 0.7px;
  word-spacing: 0px;
}
.unter {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* margin responsive*/
@media (max-width: 768px) {
  .marres {
    margin-top: -35px;
  }
  .marres2 {
    margin-top: -60px;
  }
  .marres3 {
    margin-top: -80px;
  }
}
/*font-size headline & text*/
.fsh {
  font-size: 22px;
}
.fsh2 {
  font-size: 22px;
}
.fsh3 {
  font-size: 28px;
}
.fsp {
  font-size: 14pt;
}
.fsp2 {
  font-size: 12pt;
}
/*font-size headline & text responsive*/
@media (max-width: 768px) {
  .fsh {
    font-size: 18.5px;
  }
  .fsh2 {
    font-size: 18px;
  }
  .fsp {
    font-size: 13pt;
  }
  .fsh3 {
    font-size: 21px;
  }
  .fsp2 {
    font-size: 10pt;
  }
}
/* Container2  */
@media (max-width: 767px) {
  .container2 {
    display: grid;
    place-items: center; /* Zentriert den Inhalt sowohl horizontal als auch vertikal */
    padding: 0 10px;
    margin: 0 auto;
    max-width: 100%;
  }
}
@media (min-width: 767px) {
  .container2 {
    display: grid;
    place-items: center; /* Zentriert den Inhalt sowohl horizontal als auch vertikal */
    padding: 0 50px;
    margin: 0 auto;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .container2 {
    display: grid;
    place-items: center; /* Zentriert den Inhalt sowohl horizontal als auch vertikal */
    padding: 0 100px;
    margin: 0 auto;
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .container2 {
    display: grid;
    place-items: center; /* Zentriert den Inhalt sowohl horizontal als auch vertikal */
    padding: 0 200px;
    margin: 0 auto;
    max-width: 100%;
  }
}
/* Hide scrollbar for Chrome, Safari and Opera */
.scroll::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* menu*/
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 0%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  letter-spacing: 1.5px;
  color: #000;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f4f4f4;
}
a.xhover:hover {
  color: #000;
}
.overlay .closebtn {
  position: absolute;
  top: 8.5px;
  margin-top: -13.5px;
  right: 12px;
  font-size: 30px;
  font-weight: 500;
}
.bar1, .bar2, .bar3 {
  width: 30px;
  height: 2.5px;
  background-color: #000;
  margin: 6px 0;
}
.pointer {
  cursor: pointer;
}
/* Lightbox */
.thumb {
  z-index: 101;
  cursor: pointer;
}
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  display: none; /* Startet als unsichtbar */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease; /* Fade-Effekt */
  z-index: 100; /* Sicherstellen, dass es über anderen Inhalten liegt */
}
.lightbox.show {
  display: flex; /* Sichtbar machen */
  opacity: 1; /* Voll sichtbar */
}
.lightbox-content {
  width: 100%; /* Die gesamte Breite nutzen */
  min-height: 100vh; /* Sicherstellen, dass die weiße Fläche die volle Höhe abdeckt */
  background: white;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Inhalte am oberen Rand ausrichten */
  align-items: center;
  position: relative;
  overflow: auto; /* Scrollen aktivieren */
  transition: opacity 0.5s ease; /* Optional: auch für den Inhalt */
}
/* Lightbox Responsiv */
@media (max-width: 768px) {
  .lightbox-content {
    max-width: 89%;
    min-height: 100vh; /* Höhe auch auf mobilen Geräten anpassen */
  }
}
.lightbox img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
/* Lightbox Close Button Styling */
.lightbox .closel {
  position: fixed; /* Positionieren oben rechts */
  top: 7px;
  right: 9px;
  width: 45px;
  height: 45px;
  background-color: black; /* Weißer Hintergrund */
  border-radius: 50%; /* Perfekter Kreis */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.9rem;
  font-weight: 600;
  color: white; /* Schwarzes X */
  cursor: pointer;
  z-index: 102; /* Über Lightbox-Inhalt */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional: Schatten für Tiefe */
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.lightbox .closel:hover {
  transform: scale(1.1); /* Leichtes Vergrößern beim Hover */
  background-color: #fff; /* Farbwechsel beim Hover */
  color: black;
}
.lightbox .top-text, .lightbox .bottom-text {
  margin: 10px;
  text-align: center;
}
.lightbox .images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lmtext {
  padding-bottom: 15px;
}
/* IMAGE X */
@media (min-width: 768px) {
  .dnx {
    display: none;
  }
}
/* Fade-In für Bilder */
.fade-in {
  opacity: 0;
  transform: translateY(100px); /* Größere Verschiebung */
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {
  .fade-in {
    transform: translateY(50px); /* Reduzierte Verschiebung für kleinere Bildschirme */
  }
}
/* Hover-Effekt für Desktop */
@media (min-width: 1024px) {
  .fade-in:hover {
    transform: scale(0.96); /* Verkleinert das Bild um 5% */
  }
}
/* Fade-In für FOOTER */
.fade-in2 {
  opacity: 0;
  transform: translateY(100px); /* Größere Verschiebung */
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.fade-in2.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {
  .fade-in2 {
    transform: translateY(50px); /* Reduzierte Verschiebung für kleinere Bildschirme */
  }
}
/* Einblenden LOGO & HEADLINE */
.fade-in-on-load {
  opacity: 0;
  transform: translateY(20px); /* Optional: Anfangsposition */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-on-load.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Fade-In-Effekt BILD UNTERSCHIRFT */
.fade-in-text {
  opacity: 0;
  transform: translateY(20px); /* Kleine Verschiebung für den Fade-In-Effekt */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
/* Sichtbar im Viewport */
.fade-in-text.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Fade-In-Effekt MENÜ */
/* Standard-Einstellung für Fade-In */
.menu-fade {
  opacity: 0;
  transform: translateY(30px); /* Kleine Verschiebung nach unten */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
/* Sichtbar beim Öffnen des Menüs */
.menu-fade.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Sichtbar beim Öffnen des Menüs */

.underline {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1.5px;
}

.mtop {
    margin-top: 80px;
}

@media (max-width: 768px) {
.mtop {
    margin-top: 40px;
    margin-bottom: 22px;
}
}
html {
    scroll-behavior: smooth;
}