/* 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: #444;;
  letter-spacing: 0.20rem;
  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;
  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;
  }

  a {
    color: #888;
  }

  a:hover {
    color: #ca0202 ;
  }

      :root {
        --overlay-opacity: 0.5;
        --overlay-color: #222;
        --menu-bg: rgba(30, 30, 30, 0.95);
        --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }

.small2 {
  font-size: 70%;
}
      
      /* Loading Spinner */
      #loadingSpinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.5s ease, visibility 0.5s ease;
      }

      #loadingSpinner.hidden {
        opacity: 0;
        visibility: hidden;
      }

      .spinner {
        width: 60px;
        height: 60px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top: 4px solid #ccc;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* Video Hero */
      .video-hero {
        position: relative;
        background-color: #222;
        height: 100vh;
        min-height: 600px;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

      /* Video Styling */
      .video-hero video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        opacity: 0;
        transition: opacity 1s ease;
      }

      .video-hero video.visible {
        opacity: 1;
      }

      /* Fallback Image */
      .fallback-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        opacity: 1;
        transition: opacity 1s ease;
      }

      .video-loaded .fallback-image {
        opacity: 0;
      }

      /* Overlay */
      .video-hero .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        z-index: 1;
      }

      /* Content Container */
      .video-hero .container {
        position: relative;
        z-index: 2;
        height: 100%;
      }

      /* Fixed Header with Hamburger */
      .fixed-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 1rem 2rem;
        z-index: 1000;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        background: rgba(0, 0, 0, 0.3);
      }

      .fixed-header.scrolled {
        background: rgba(0, 0, 0, 0.9);
        padding: 0.5rem 2rem;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
      }

      /* Logo in Header - appears on scroll */
      .header-logo {
        color: #bbb;
        font-size: 1.5rem;
        font-weight: 700;
        text-decoration: none;
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s ease;
        position: absolute;
        left: 2rem;
        top: 50%;
        transform: translateY(-50%) translateX(-20px);
      }

      .fixed-header.scrolled .header-logo {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }

      /* Hamburger Button */
      .hamburger-btn {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
      }

      .hamburger-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
      }

      .hamburger-line {
        width: 20px;
        height: 2px;
        background: white;
        margin: 2px 0;
        transition: all 0.3s ease;
        border-radius: 1px;
      }

      .hamburger-btn.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
      }

      .hamburger-btn.active .hamburger-line:nth-child(2) {
        opacity: 0;
      }

      .hamburger-btn.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
      }

      /* Flyout Menu */
      .flyout-menu {
        position: fixed;
        top: 0;
        right: -400px;
        width: 350px;
        height: 100%;
        background: var(--menu-bg);
        z-index: 999;
        transition: right var(--transition-slow);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
      }

      .flyout-menu.active {
        right: 0;
      }

      .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-slow);
      }

      .menu-overlay.active {
        opacity: 1;
        visibility: visible;
      }

      .menu-header {
        padding: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .menu-logo {
        color: white;
        font-size: 1.5rem;
        font-weight: 700;
        text-decoration: none;
      }

      .menu-nav {
        flex: 1;
        padding: 2rem;
      }

      .menu-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .menu-nav li {
        margin-bottom: 1rem;
      }

      .menu-nav a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 300;
        transition: all 0.3s ease;
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid transparent;
      }

      .menu-nav a:hover {
        color: white;
        padding-left: 10px;
        border-bottom-color: rgba(255, 255, 255, 0.2);
      }

      .menu-footer {
        padding: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.9rem;
        line-height: 1.5;
      }

      /* Hero Content Buttons - ALWAYS visible */
      .hero-buttons {
        position: relative;
        z-index: 3;
      }

      /* Up Button */
      .up-button {
        position: fixed;
        bottom: -80px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 997;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
      }

      .up-button.visible {
        bottom: 30px;
      }

      .up-button:hover {
        background: rgba(0, 0, 0, 0.9);
        border-color: white;
        transform: translateY(-3px);
      }

      /* Hero Content */
      .hero-content {
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
      }

      .hero-title {
         font-family: 'Oswald-Regular', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;;
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: bold;
        letter-spacing: -0.5px;
        color: #ddd;
      }

      .hero-subtitle {
        font-family: 'Gantari-Regular', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: clamp(1rem, 2vw, 1.5rem);
        font-weight: 400;
        color: #ccc;
      }

      /* Video Progress - removed since no controls */
      .video-progress {
        display: none;
      }

      /* Content Sections */
      .content-section {
        padding: 100px 0;
      }

      .content-section:nth-child(even) {
        background: #f8f9fa;
      }

      /* Mobile Optimization */
      @media (max-width: 768px) {
        .video-hero {
          height: 70vh;
          min-height: 500px;
        }

        .fixed-header {
          padding: 0.75rem 1rem;
        }

        .header-logo {
          left: 1rem;
          font-size: 1.2rem;
        }

        .flyout-menu {
          width: 100%;
          right: -100%;
        }

        .up-button {
          right: 20px;
        }

        .hamburger-btn {
          width: 40px;
          height: 40px;
        }

        .hamburger-line {
          width: 18px;
        }
      }

      @media (max-width: 480px) {
        .hero-title {
          font-size: 2rem;
        }

        .hero-subtitle {
          font-size: 1.1rem;
        }

        .header-logo {
          font-size: 1rem;
        }
      }

      .impressum-nav a {
  color: rgba(95, 95, 95, 0.8);
  text-decoration: none;
}

.impressum-nav a:hover {
  color: rgba(200, 200, 200, 0.8);
}