@charset "UTF-8";
/* CSS Document */
body {
  font-family: 'SK-B-Regular', sans-serif;
}
.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: 15px;
}
.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-family: 'SK-B-SemiBold', sans-serif;
  color: black;
  text-decoration: none;
}
.box {
  background-color: white;
  width: 100%;
  padding: 30px;
  margin: auto;
  color: black;
}
.box2 {
  background-color: black;
  width: 100%;
  padding: 120px;
  margin: auto;
  color: white;
}
.box3 {
  background-color: black;
  width: calc(100% - 70px);
  padding: 110px;
  margin: 30px;
  color: white;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .box2 {
    background-color: black;
    width: 100%;
    padding: 40px;
	padding-top: 70px;
    margin: auto;
    color: white;
  }
  .box3 {
    background-color: black;
    width: calc(100% - 68px);
    padding: 30px;
    padding-top: 70px;
    margin: 30px;
    color: white;
    box-sizing: border-box;
  }
}
.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: 26px;
}

.fsh3 {
  font-size: 28px;
}
.fsp {
  font-size: 15pt;
}
.fsp2 {
  font-size: 14pt;
}
.fsp3 {
  font-size: 14pt;
}
.fsp4 {
  font-size: 15pt;
}
/*font-size headline & text responsive*/
@media (max-width: 768px) {
  .fsh {
    font-size: 18.5px;
  }
	.fsh2 {
  font-size: 22px;
}
  .fsp {
    font-size: 13pt;
  }
  .fsp2 {
    font-size: 12pt;
  }
  .fsp3 {
    font-size: 13pt;
  }
}
/* Container2  */
@media (max-width: 768px) {
  .container2 {
    display: grid;
    padding: 0 10px;
    margin: 0 auto;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .container2 {
    display: grid;
    padding: 0 50px;
    margin: 0 auto;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .container2 {
    display: grid;
    padding: 0 100px;
    margin: 0 auto;
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .container2 {
    display: grid;
    padding: 0 200px;
    margin: 0 auto;
    max-width: 1835px;
  }
}
/* 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 */
}
/* accordion */
.accordion {
  background-color: #000;
  color: #fff;
  cursor: pointer;
  padding: 32px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.6s ease-in-out; /* Verlängert die Sanftheit */
  font-weight: 400;
  text-decoration: none;
}
.active, .accordion:hover {
  background-color: #000;
}
.accordion:after {
  content: '\2193'; /* Pfeil nach unten */
  color: #fff;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2191"; /* Pfeil nach oben */
}
.panel {
  padding: 0 0px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out, padding 0.8s ease-in-out; /* Sanfter und langsamer */
  border-radius: 0px;
  box-shadow: none;
}
ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
hr.new1 {
  border-top: 1px solid black;
}
/* 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;
}
/* 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 */
  }
}
/* 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);
}
.fhover a:hover, .overlay a:focus {
  color: #f4f4f4;
}
.underline {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1.5px;
}
html {
    scroll-behavior: smooth;
}