/* wipmedia bs5-custom1 Template 3.25 / Bootstrap 5.3.3*/


@font-face {
  font-family: 'Oswald-Regular';
  src: url('../../assets/fonts/Oswald-Regular.eot');
  src: url('../../assets/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
      url('../../assets/fonts/Oswald-Regular.woff2') format('woff2'),
      url('../../assets/fonts/Oswald-Regular.woff') format('woff'),
      url('../../assets/fonts/Oswald-Regular.svg#Oswald-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gantari-Regular';
  src: url('../../assets/fonts/Gantari-Regular.eot');
  src: url('../../assets/fonts/Gantari-Regular.eot?#iefix') format('embedded-opentype'),
      url('../../assets/fonts/Gantari-Regular.woff2') format('woff2'),
      url('../../assets/fonts/Gantari-Regular.woff') format('woff'),
      url('../../assets/fonts/Gantari-Regular.svg#Gantari-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


body {
  font-family: 'Gantari-Regular', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 1em;
  color: #999;
  background-color: #111;
}

p {
  font-family: 'Gantari-Regular', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: #999;
  letter-spacing: 0.25rem;
  text-shadow: 0 4px 6px rgba(58, 58, 58, 0.6);
}

H1 {
  font-family: 'Oswald-Regular', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;;
  font-size: 4em;
  font-weight: bold;
  color: #bbb;
  letter-spacing: 0.6rem;
  text-shadow: 0 4px 6px rgba(58, 58, 58, 0.6);
}

H2 {
  font-family: 'Oswald-Regular', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;;
  font-size: 3em;
  font-weight: 800;
}

H3 {
  font-family: 'Oswald-Regular', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 2em;
  font-weight: 900;
}

  H4 {
    font-family: 'Oswald-Regular', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1em;
    font-weight: 900;
  }  

.copyright {
  font-family: 'Gantari-Regular', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 0.6em;
}

.bold {
  font-weight: 900;
}

/* Standard-Link */
a {
  color: #afafaf;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* Hover */
a:hover {
  color: #b40000;
  opacity: 0.8;
}

/* Fokus (Accessibility) */
a:focus {
  outline: 2px dashed rgba(255,255,255,0.5);
  outline-offset: 3px;
}

/* Hintergrundvideo */
#video-container {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:-1;
}
#bgvideo {
  position:absolute;
  top:50%;
  left:50%;
  min-width:100%;
  min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
}

/* Overlay */
#video-overlay {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.45);
  z-index:0;
  pointer-events:none;
}

/* Loader */
#loader {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition: opacity 0.6s ease;
}
#loader.hidden {
  opacity:0;
  pointer-events:none;
}

/* Fallback */
#fallback-image {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
  display:none;
}

/* Content Mitte */
.center-box {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:white;
  z-index:2;
}
.center-box img { max-width:260px; width:100%; height:auto;}
@media(max-width:992px){.center-box img{max-width:200px;}}
@media(max-width:576px){.center-box img{max-width:150px;}}
.fade-in {opacity:0; transition:opacity 4s ease;}
.fade-in.show{opacity:1;}

/* Hamburger Menü */
#menu-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 5;
}
#menu-toggle {
  font-size:2rem;
  background:none;
  border:none;
  color:#777;
  cursor:pointer;
}
#flyout-menu {
  position: fixed;
  top:0;
  right:-300px;
  width:300px;
  height:100%;
  background: rgba(0,0,0,0.9);
  color:#999;
  padding:2rem;
  transition: right 0.5s ease;
  z-index:4;
  overflow-y:auto;
}
#flyout-menu.open { right:0; }

/* Hamburger + Pfeil */
#menu-toggle {
  font-size:2rem;
  font-weight: 200;
  background:none;
  border:none;
  color:#acacac;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:0.3rem;
}
#menu-arrow {
  display:inline-block;
  transition: transform 0.5s ease;
}
#menu-arrow.open {
  transform: rotate(90deg);
}

/* Flyout Menü */
#flyout-menu {
  position: fixed;
  top:0;
  right:-320px; /* Start außerhalb */
  width:320px;
  height:100%;
  background: rgba(44, 44, 44, 0.9);
  color:#999;
  padding:2rem;
  transition: right 0.9s ease, opacity 0.9s ease;
  opacity:0;
  z-index:4;
  overflow-y:auto;
}

#flyout-menu.open {
  right:0;
  opacity:1;
}

/* Close Button */
#menu-close {
  position:absolute;
  top:10px;
  right:10px;
  font-size:2rem;
  background:none;
  border:none;
  color:rgb(211, 211, 211);
  cursor:pointer;
}