/*
 Theme Name:   Child-Theme Uniquos Digital Solions
 Description:  Child-Theme für Lexperians
 Tags: Blank, HTML5, CSS3
  Author:       Uniquos Development Team
  Template:     Divi
  Version:      1.22 Build 20251120
*/

/************************
 *  Allgemein           *
 * **********************/

/* Card blur */

.blur-card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
}

/************************
 *  HERO Section        *
 *  Soft Fade			*
 ************************/

/* Sektion als Container */
.bg-swap{
  position: relative;
  overflow: hidden;
}

/* Animierter Background-Layer + Gradient */
.bg-swap::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;

  animation: bgSwap 15s infinite;
  animation-timing-function: linear;
  will-change: opacity;
}

/* Inhalt über dem Background halten */
.bg-swap > *{
  position: relative;
  z-index: 1;
}

@keyframes bgSwap{

  /* ========= Bild 1 steht ========= */
  0%{
    opacity: 1;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/pexels-bruggi-5937928-scaled.jpg");
  }
  28%{
    opacity: 1;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/pexels-bruggi-5937928-scaled.jpg");
  }

  /* Fade OUT (Bild 1 bleibt explizit gesetzt) */
  33%{
    opacity: 0;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/pexels-bruggi-5937928-scaled.jpg");
  }

  /* Bildwechsel im unsichtbaren Moment */
  33.5%{
    opacity: 0;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2026/02/pexels-justus-menke-3490295-5213170-scaled.jpg");
  }

  /* Fade IN Bild 2 */
  38%{
    opacity: 1;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2026/02/pexels-justus-menke-3490295-5213170-scaled.jpg");
  }

  /* ========= Bild 2 steht ========= */
  61%{
    opacity: 1;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2026/02/pexels-justus-menke-3490295-5213170-scaled.jpg");
  }

  /* Fade OUT (Bild 2 bleibt explizit gesetzt) */
  66%{
    opacity: 0;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2026/02/pexels-justus-menke-3490295-5213170-scaled.jpg");
  }

  /* Bildwechsel im unsichtbaren Moment */
  66.5%{
    opacity: 0;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/Paris_cropped.png");
  }

  /* Fade IN Bild 3 */
  71%{
    opacity: 1;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/Paris_cropped.png");
  }

  /* ========= Bild 3 steht ========= */
  94%{
    opacity: 1;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/Paris_cropped.png");
  }

  /* Fade OUT am Ende (Bild 3 bleibt) */
  97%{
    opacity: 0;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/Paris_cropped.png");
  }

  /* Wechsel zurück zu Bild 1, immer noch unsichtbar */
  97.5%{
    opacity: 0;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/pexels-bruggi-5937928-scaled.jpg");
  }

  /* Fade IN bis Ende — 100% == 0% (nahtloser Loop) */
  100%{
    opacity: 1;
    background-image:
      linear-gradient(77.64deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
      url("https://dev.lexperians.de/wp-content/uploads/2025/12/pexels-bruggi-5937928-scaled.jpg");
  }
}

/* Optional: Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  .bg-swap::before{ animation: none; }
}

.et_pb_menu__wrap .mobile_menu_bar {
  /* transform: translateY(3%); */
  position: absolute;
  right: 10px;
  top: -110px;
}

/************************
 *  Navigation          *
 *  Dropdown-Spacing    *
 ************************/

/* Nur Desktop (ab 981px — Divi-Breakpoint) */
@media (min-width: 981px) {

  /* Padding auf dem <a>-Link, nicht auf <li>:
     So bleibt die Mausfläche lückenlos und
     das Menü klappt nicht ein beim Scrollen. */
  #top-menu .sub-menu a,
  .et_pb_menu .et-menu .sub-menu a,
  .et_pb_menu__wrap .et-menu .sub-menu a {
    padding-top: 6px;
    padding-bottom: 6px;
    display: block; /* sicherstellen, dass padding greift */
  }

  /* Abstand zum Dropdown über padding-bottom des Hauptmenü-Links:
     Die Hover-Fläche des <a> überbrückt den Abstand lückenlos —
     kein margin-top auf sub-menu, das würde eine tote Zone erzeugen. */
  #top-menu > li > a,
  .et_pb_menu .et-menu > li > a,
  .et_pb_menu__wrap .et-menu > li > a {
    padding-bottom: 20px!important;
  }

}

/* Navigation Dropdown-Styling wird vom Lex Menu Modul (modules/LexMenu) übernommen. */
/* Fullscreen Mobile Menü */
#mobile_menu1 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow-y: auto;
  z-index: 99999 !important;
  box-sizing: border-box;
  padding-top: 60px !important;
}

/* Nur oben eine Linie für alle Menüpunkte */
#mobile_menu1 li a {
  border-top: 1px solid rgba(255,255,255,0.5) !important;
  border-bottom: none !important;
  color: #fff !important;
}

/* 4px Abstand nach oben bei Untermenüpunkten */
#mobile_menu1 li li {
  margin-top: 4px !important;
}

.et_pb_image_0_tb_header .et_pb_image_wrap {
  display: flex !important;
  width: 100% !important;
}