/* Globales CSS für VvvebJs Templates */

/* ==========================================================================
   Sektionen Positionierung
   ========================================================================== */
section, header, footer {
  position: relative;
}

/* ==========================================================================
   Background Container & Parallax Styles (Bilder, HTML5 Video & YouTube als Hintergrund)
   ========================================================================== */
.background-container,
.parallax {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.background-container.parallax,
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background-container img,
.background-container video,
.parallax img,
.parallax video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.background-container .iframe-container,
.parallax .iframe-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 Aspect Ratio */
  min-height: 100%;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: hidden;
}

.background-container .iframe-container iframe,
.parallax .iframe-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* ==========================================================================
   Overlays & Content Stacking
   ========================================================================== */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #000;
  opacity: 0.7;
}

/* Elemente innerhalb einer Sektion mit Hintergrund müssen über dem Video/Bild liegen */
.background-container + .container,
.parallax + .container,
.overlay + .container,
.background-container ~ *,
.parallax ~ * {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Responsive Navigation / Navbar (Pure Structural & Responsive Rules)
   ========================================================================== */
.navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
}

/* Erster Inhalts-Block direkt nach der fixierten Navbar */
.navbar.fixed-top + *,
nav.navbar + *,
body > .navbar + * {
  padding-top: 100px !important;
}

.navbar.fixed-top + header.hero,
nav.navbar + header.hero,
.navbar.fixed-top + .hero,
nav.navbar + .hero,
body > .navbar + header.hero,
body > .navbar + .hero {
  padding-top: 10rem !important;
}

.navbar .container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}

.navbar-toggler {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1060 !important;
  outline: none !important;
  margin-left: auto !important;
  transition: all 0.25s ease-in-out !important;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: none !important;
  display: block !important;
  position: relative !important;
  width: 22px !important;
  height: 2px !important;
  background-color: currentColor !important;
  transition: all 0.25s ease-in-out !important;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  width: 22px !important;
  height: 2px !important;
  background-color: currentColor !important;
  transition: all 0.25s ease-in-out !important;
}

.navbar-toggler .navbar-toggler-icon::before {
  top: -7px !important;
}

.navbar-toggler .navbar-toggler-icon::after {
  top: 7px !important;
}

/* X-Transformation when active / open */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon,
.navbar-toggler.is-active .navbar-toggler-icon {
  background-color: transparent !important;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
.navbar-toggler.is-active .navbar-toggler-icon::before {
  top: 0 !important;
  transform: rotate(45deg) !important;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after,
.navbar-toggler.is-active .navbar-toggler-icon::after {
  top: 0 !important;
  transform: rotate(-45deg) !important;
}

@media (min-width: 992px) {
  .navbar-toggler {
    display: none !important;
  }
  .navbar .navbar-collapse {
    display: flex !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .navbar .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
    margin-left: auto !important;
  }
}

@media (max-width: 991.98px) {
  .navbar-toggler {
    display: inline-flex !important;
  }

  /* Override Volt admin full-screen 100vh absolute styles */
  .navbar .navbar-collapse {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    display: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .navbar .navbar-collapse.show {
    display: block !important;
    height: auto !important;
    padding: 0.85rem 1rem;
    margin-top: 0.6rem;
  }

  .navbar .navbar-collapse-header {
    display: none !important;
  }

  .navbar .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    height: auto !important;
  }

  .navbar .navbar-nav .nav-item {
    width: 100% !important;
  }

  .navbar .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border-radius: 4px;
    display: block;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    width: 100%;
  }

  .navbar-brand {
    font-size: 1.25rem;
  }
}



/* ==========================================================================
   Form Checks (Checkboxes & Radios) - Theme Primary Color override
   ========================================================================== */
.form-check-input:checked {
  background-color: var(--c-primary, var(--bs-primary)) !important;
  border-color: var(--c-primary, var(--bs-primary)) !important;
}

.form-check-input:focus {
  border-color: var(--c-primary, var(--bs-primary)) !important;
  /* Optionale Box-Shadow in Primary-Farbe, leicht transparent falls unterstützt */
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--c-primary, var(--bs-primary)) 25%, transparent) !important;
}

/* ==========================================================================
   Flip-Box Component
   ========================================================================== */
.flip-box {
  background-color: transparent;
  width: 100%;
  min-height: 350px;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 350px;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-box.enabled:hover .flip-box-inner,
.flip-box.enabled.back .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--bs-border-radius, 0.375rem);
  overflow: hidden;
}

.flip-box-front {
  z-index: 1;
}

.flip-box-back {
  z-index: 2;
  transform: rotateY(180deg);
}

.flip-box.enabled.vertical:hover .flip-box-inner,
.flip-box.enabled.vertical.back .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box.vertical .flip-box-back {
  transform: rotateX(180deg);
}

/* ==========================================================================
   Social Media Icons Component
   ========================================================================== */
.social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-icons .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.social-icons .social-icon-btn,
.social-icons a.social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  line-height: 1;
  vertical-align: middle;
  padding: 0;
  box-sizing: border-box;
}

.social-icons .social-icon-btn svg,
.social-icons a.social-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.social-icons .social-icon-btn:hover,
.social-icons a.social-icon-btn:hover {
  transform: translateY(-2px);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.social-icons .social-icon-btn:hover svg,
.social-icons a.social-icon-btn:hover svg {
  transform: scale(1.08);
}

/* Formen (Shapes) */
.social-icons.social-icons-rounded .social-icon-btn,
.social-icons.social-icons-rounded a.social-icon-btn {
  border-radius: 10px;
}

.social-icons.social-icons-square .social-icon-btn,
.social-icons.social-icons-square a.social-icon-btn {
  border-radius: 4px;
}

.social-icons.social-icons-minimal .social-icon-btn,
.social-icons.social-icons-minimal a.social-icon-btn {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.social-icons.social-icons-minimal .social-icon-btn:hover,
.social-icons.social-icons-minimal a.social-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* Größen (Sizes) */
.social-icons.social-icons-sm .social-icon-btn,
.social-icons.social-icons-sm a.social-icon-btn {
  width: 32px;
  height: 32px;
}
.social-icons.social-icons-sm .social-icon-btn svg,
.social-icons.social-icons-sm a.social-icon-btn svg {
  width: 16px;
  height: 16px;
}

.social-icons.social-icons-lg .social-icon-btn,
.social-icons.social-icons-lg a.social-icon-btn {
  width: 50px;
  height: 50px;
}
.social-icons.social-icons-lg .social-icon-btn svg,
.social-icons.social-icons-lg a.social-icon-btn svg {
  width: 24px;
  height: 24px;
}

/* Brand Hover Colors (Standard) */
.social-icons .social-facebook:hover {
  background: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
}

.social-icons .social-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
  border-color: #d6249f !important;
  color: #ffffff !important;
}

.social-icons .social-linkedin:hover {
  background: #0a66c2 !important;
  border-color: #0a66c2 !important;
  color: #ffffff !important;
}

.social-icons .social-x:hover,
.social-icons .social-twitter:hover {
  background: #000000 !important;
  border-color: #555555 !important;
  color: #ffffff !important;
}

.social-icons .social-youtube:hover {
  background: #ff0000 !important;
  border-color: #ff0000 !important;
  color: #ffffff !important;
}

.social-icons .social-tiktok:hover {
  background: #010101 !important;
  border-color: #fe2c55 !important;
  color: #ffffff !important;
}

.social-icons .social-whatsapp:hover {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
}

/* Immer Markenfarben (Colored Theme) */
.social-icons.social-icons-colored .social-facebook {
  background: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
}
.social-icons.social-icons-colored .social-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color: #d6249f;
  color: #ffffff;
}
.social-icons.social-icons-colored .social-linkedin {
  background: #0a66c2;
  border-color: #0a66c2;
  color: #ffffff;
}
.social-icons.social-icons-colored .social-x,
.social-icons.social-icons-colored .social-twitter {
  background: #000000;
  border-color: #333333;
  color: #ffffff;
}
.social-icons.social-icons-colored .social-youtube {
  background: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
}
.social-icons.social-icons-colored .social-tiktok {
  background: #010101;
  border-color: #fe2c55;
  color: #ffffff;
}
.social-icons.social-icons-colored .social-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}

/* Hell / Dunkel Monochrom Themes */
.social-icons.social-icons-dark .social-icon-btn,
.bg-light .social-icons:not(.social-icons-colored) .social-icon-btn,
.bg-white .social-icons:not(.social-icons-colored) .social-icon-btn,
[data-bs-theme="light"] .social-icons:not(.social-icons-colored) .social-icon-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.social-icons.social-icons-dark .social-icon-btn:hover,
.bg-light .social-icons:not(.social-icons-colored) .social-icon-btn:hover,
.bg-white .social-icons:not(.social-icons-colored) .social-icon-btn:hover,
[data-bs-theme="light"] .social-icons:not(.social-icons-colored) .social-icon-btn:hover {
  color: #ffffff;
}

.social-icons.social-icons-light .social-icon-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}