/* Delvia static overrides - Stand 2026-04-28
 * - Menue: Original-Weinrot #5b1111 + Aktiv-Gold #ba8200 (wie auf delvia.de)
 * - Header-BG: Original helles Weiss-transparent (wie auf delvia.de)
 * - Body-BG: Linear-Gradient wie delvia-beratung.de (horizontal, weinrot->gold->weinrot)
 */

/* ============================================================
 * Body / HTML: horizontaler Gradient wie delvia-beratung.de
 * Vorher: solid #250802. Jetzt: 90deg dunkel-rot -> gold -> dunkel-rot
 * Quelle: https://delvia-beratung.de/typo3conf/.../style.css "main"
 * ============================================================ */
html, body {
  background-color: #250802 !important; /* Fallback */
  background-image: linear-gradient(
    90deg,
    rgba(25, 5, 1, 1) 0%,
    rgba(117, 30, 9, 1) 29%,
    rgba(203, 122, 8, 1) 51%,
    rgba(117, 30, 9, 1) 76%,
    rgba(25, 3, 0, 1) 100%
  ) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Page-Container und Main-Content transparent halten,
   damit Body-Gradient durchscheint (Hero-Video bleibt sichtbar,
   weil das Video als Section-Background liegt) */
#page-container,
#main-content,
#et-main-area {
  background-color: transparent !important;
}

/* ============================================================
 * Top-Menue: ORIGINAL helles Weiss-transparent (wie delvia.de)
 * (zurueckgesetzt von vorher dunkel-schwarz)
 * ============================================================ */
#main-header,
.et-l--header,
header.et-l--header,
header#main-header {
  background-color: rgba(255, 255, 255, 0.81) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none !important;
}

.et-fixed-header#main-header,
.et-fixed-header.et-l--header {
  background-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============================================================
 * Menue-Schrift: ORIGINAL Weinrot #5b1111 + Aktiv-Gold #ba8200
 * (Quelle: et-critical-inline-css von delvia.de)
 * Kein text-shadow noetig auf hellem Header.
 * ============================================================ */
#top-menu a,
#top-menu > li > a,
.et-fixed-header #top-menu a {
  color: #5b1111 !important;
  text-shadow: none !important;
}

#top-menu > li > a:hover,
#top-menu-nav > ul > li > a:hover,
#top-menu > li:hover > a {
  color: #8a2222 !important;
  opacity: 1 !important;
}

/* Aktiver Menuepunkt: Original-Gold #ba8200 (NICHT helles Gold!) */
#top-menu li.current-menu-ancestor > a,
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a,
.et-fixed-header #top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-ancestor > a,
.et-fixed-header #top-menu li.current_page_item > a {
  color: #ba8200 !important;
  text-shadow: none !important;
}

/* Sub-Menu-Links */
#top-menu li li a { color: #5b1111 !important; }
#top-menu li li a:hover { color: #8a2222 !important; }

/* Mobile-Menue Default - wird in @media (max-width:980px) ueberschrieben */

/* Hamburger-Icon zurueck auf Weinrot */
.mobile_menu_bar:before { color: #5b1111 !important; }

/* Verhindert, dass entfernte WooCommerce/Borlabs-Elemente Leerraum lassen */
.woocommerce, .et-cart-info, .et_pb_menu__search,
#BorlabsCookieBox, ._brlbs-box, #BorlabsCookieBoxWrapper {
  display: none !important;
}

/* Notausstieg: Divi-Preloader-Spinner deaktivieren */
.et_pb_preload .et_pb_section_video_bg,
.et_pb_preload > div { visibility: visible !important; }
.et_pb_preload { background: transparent !important; }
.et_pb_preload::before { display: none !important; }

/* ============================================================
 * Hero-Section: defensiv full-width sicherstellen
 * (Sternenhimmel-Video back.mov bis zum Bildrand)
 * ============================================================ */
.et_pb_section.et_pb_section_0,
.et_pb_section.et_pb_section_video,
.et_pb_section_0 > .et_pb_section_video_bg,
.et_pb_section_0 > .et_pb_section_video_bg_container {
  width: 100% !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.et_pb_section_0 .et_pb_section_video_bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.et_pb_section_0 .et_pb_section_video_bg video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
}

.et_pb_section_0 > .et_pb_row {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
 * Menue-Spacing: Angleichung an Typo3 delvia-beratung.de
 * Stand 2026-04-28
 * Typo3 hat:
 *   - <a> margin: 0 10px (=> 20px Gap zwischen Items, symmetrisch)
 *   - <a> padding: 0 (kein 15px-Bottom)
 *   - parent (li/div.top-menu-item) padding: 7px 0 8px (Text vertikal mittig)
 *   - line-height: normal
 * Preview hatte vorher:
 *   - <a> padding: 0 0 15px  (Text klebt oben)
 *   - <a> line-height: 14px
 *   - li padding-right: 22px (asymmetrisch)
 * ============================================================ */
#top-menu > li > a,
.et-fixed-header #top-menu > li > a {
  padding: 0 !important;
  margin: 0 10px !important;
  line-height: normal !important;
}

#top-menu > li,
.et-fixed-header #top-menu > li {
  padding: 7px 0 8px !important;
  margin: 0 !important;
  vertical-align: middle;
}

/* === 2026-04-28: Bar-Hoehe und Item-Spacing exakt an Typo3 angleichen === */
/* Typo3 #main-header ist 41px hoch (nur Menue-Bar, kein Padding drum). 
   Unsere Preview hatte 56px durch extra Container-Padding. */
#main-header {
  min-height: 41px !important;
  padding: 0 !important;
}
#main-header .container,
#main-header > .container,
#et-top-navigation {
  padding: 0 !important;
  min-height: 41px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
#main-header #top-menu {
  margin: 0 !important;
}
/* Item-Spacing: Typo3 hat ~104px Item-Diff, wir hatten 110px. 
   margin 0 10px = 20px gap. Pruefen ob li auch noch margin hat. */
#top-menu > li {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Item-Diff war 110px (Soll 104px) wegen 6px inline-block Whitespace zwischen <li>.
   Loesung: top-menu auf Flex, kein Whitespace mehr. */
#top-menu {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
#top-menu > li {
  display: flex !important;
  align-items: center !important;
}

/* ============================================================
 * Mobile-Menue (Stand 2026-04-28 v2): "Menue" links + Hamburger rechts
 * Unter 980px (Divi-Standard-Breakpoint):
 *  - Desktop-Menue (#top-menu) verstecken
 *  - Mobile-Toggle (#et_mobile_nav_menu) anzeigen
 *  - Label "Menue" links via ::before, Hamburger rechts daneben
 *  - Slide-Down Animation beim Oeffnen
 *  - Klick auf Label triggert Hamburger via mobile-menu-helper.js
 * ============================================================ */
@media (max-width: 980px) {
  /* Desktop Top-Menue komplett verstecken */
  #top-menu,
  #top-menu-nav,
  #et-top-navigation #top-menu-nav,
  #et-top-navigation #top-menu {
    display: none !important;
  }

  /* Mobile-Toggle Container sichtbar (Divi-Default ist display:none) */
  #et_mobile_nav_menu {
    display: block !important;
    float: right !important;
    position: relative !important;
  }
  #et-top-navigation {
    justify-content: flex-end !important;
  }
  /* Header / Top-Nav muss position:relative sein, damit das absolute
     Mobile-Menue darunter andocken kann */
  #main-header,
  #et-top-navigation {
    position: relative !important;
  }

  /* "Seite waehlen" Default-Label unterdruecken */
  #et_mobile_nav_menu .select_page {
    display: none !important;
  }

  /* Mobile-Nav: Flex-Container - Label LINKS, Hamburger RECHTS */
  .mobile_nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.6rem !important;
    padding: 0 1rem !important;
    cursor: pointer !important;
  }

  /* Label "Menue" via ::before -> wird VOR dem Hamburger gerendert (links) */
  .mobile_nav::before {
    content: "Men\00FC";
    color: #5b1111;
    font-family: Caudex, Georgia, serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    order: 0;
    line-height: 1;
  }
  /* Alte ::after-Loesung entfernen */
  .mobile_nav::after {
    content: none !important;
  }

  /* Hamburger-Icon rechts vom Label */
  .mobile_menu_bar {
    color: #5b1111 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    order: 1 !important;
  }
  .mobile_menu_bar::before {
    color: #5b1111 !important;
    font-size: 28px !important;
  }

  /* Aufgeklapptes Mobile-Menue: slide-down von oben mit Animation
     Divi setzt beim Oeffnen .mobile_nav.opened und rendert .et_mobile_menu.
     Wir nutzen eine CSS-Animation, die jedes Mal laeuft wenn das Element
     sichtbar wird (Divi toggelt es aus dem DOM bzw. via display). */
  .et_mobile_menu {
    background-color: rgba(255, 255, 255, 0.97) !important;
    border-top: 3px solid #5b1111 !important;
    box-shadow: 0 8px 18px rgba(91, 17, 17, 0.22) !important;
    padding: 5% !important;
    /* Slide-Down Animation */
    animation: delviaMobileSlideDown 0.35s ease-out;
    transform-origin: top center;
  }
  .et_mobile_menu li a,
  #mobile_menu li a,
  .et_mobile_menu li a:visited {
    color: #5b1111 !important;
    font-family: Caudex, Georgia, serif !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(91, 17, 17, 0.18) !important;
    padding: 12px 5% !important;
  }
  .et_mobile_menu li a:hover {
    color: #ba8200 !important;
    background-color: rgba(232, 185, 44, 0.06) !important;
    opacity: 1 !important;
  }
  .et_mobile_menu li.current-menu-item > a {
    color: #ba8200 !important;
  }
}

/* Slide-Down Keyframes (auch ausserhalb der Media-Query, damit Browser
   die Animation kennen wenn sie referenziert wird) */
@keyframes delviaMobileSlideDown {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* === 2026-04-28 Mobile-Menue Fix: full-width + dunkel === */
@media (max-width: 980px) {
  /* Position relativ zum Viewport - dadurch full-width unabhaengig vom Container */
  .et_mobile_menu {
    position: fixed !important;
    top: 41px !important; /* unter der Top-Bar */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 1rem 1.5rem !important;
    background-color: rgba(25, 5, 1, 0.97) !important;
    background-image: linear-gradient(180deg, rgba(25, 5, 1, 0.98) 0%, rgba(37, 8, 2, 0.97) 100%) !important;
    border-top: 3px solid #5b1111 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
    z-index: 99999 !important;
  }
  /* Items in hellen Farben auf dunklem Grund */
  .et_mobile_menu li a,
  .et_mobile_menu li a:visited,
  #mobile_menu li a {
    color: #f4e8d0 !important;
    font-family: Caudex, Georgia, serif !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(232, 185, 44, 0.18) !important;
    padding: 14px 5% !important;
    background: transparent !important;
  }
  .et_mobile_menu li a:hover {
    color: #e8b92c !important;
    background-color: rgba(232, 185, 44, 0.08) !important;
    opacity: 1 !important;
  }
  .et_mobile_menu li.current-menu-item > a {
    color: #e8b92c !important;
  }
  .et_mobile_menu li:last-child a {
    border-bottom: none !important;
  }
}

/* === Hamburger vertikal mittig zur "MENÜ"-Schrift === */
@media (max-width: 980px) {
  .mobile_menu_bar {
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  .mobile_menu_bar::before {
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-block !important;
  }
}