/*
 Theme Name:     Webdesign Hofmann
 Theme URI:      http://www.webdesign-hofmann.de
 Description:    WH Divi Child-Theme
 Author:         Webdesign Hofmann
 Author URI:     https://webdesign-hofmann.de
 Template:       Divi
 Version:        1.0.0
*/


/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */


/* Divider-Linie zwischen Content und Sidebar entfernen */
#main-content .container:before {
  background: none;
}

/* Sidebar ausblenden */
#sidebar {
  display: none;
}

/* Content-Bereich auf volle Breite erweitern */
@media (min-width: 981px) {
  #left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
  }
}

/* Mindesthöhe für große Bildschirme */
@media (min-width: 1921px) {
  #main-content {
    min-height: 80vh !important;
  }
}

/* Menü-Links Hover-Zustand */
.et_pb_menu .et-menu ul li a:hover {
  opacity: 1 !important;
  color: currentColor !important;
}

/* Dropdown-Menü optimieren */
.et_pb_menu .et-menu ul {
  display: inline-block;
  min-width: max-content;
  white-space: nowrap;
  text-align: left;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Dropdown-Listen korrekt ausrichten */
.et_pb_menu .et-menu ul li {
  display: block;
  text-align: left;
  padding: 0 20px;
  width: 100%;
}

/* Links im Dropdown korrekt darstellen */
.et_pb_menu .et-menu ul li a {
  display: block;
  width: 100%;
}

/* Automatische Breite für Dropdown-Menüs */
@media (min-width: 981px) {
  .et_pb_menu .et_pb_menu__menu ul.sub-menu {
    width: fit-content !important;
    min-width: unset !important;
    display: flex;
    flex-direction: column;
  }

  .et_pb_menu .et_pb_menu__menu ul.sub-menu li {
    white-space: nowrap;
  }

  .et_pb_menu .et_pb_menu__menu ul.sub-menu li a {
    width: auto !important;
    padding-right: 20px;
    padding-left: 20px;
  }
}

h1, h2, h3, h4, h5, h6, p, span, li, a {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

/*==== elimitate opacitcy change on hover ====*/

.et_pb_menu ul>li>a:hover {
   opacity: 1!important;
}


/*==== Start Underline Fade ====*/

.pa-underline-fade nav ul li a {
   position: relative;
}

.pa-underline-fade nav ul li a::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 100%;
   background-color: #5085BF;
   z-index: 2;
   opacity: 0;
   display: block;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   -webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
   -o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
   transition-timing-function: cubic-bezier(.58, .3, .005, 1);
}

.pa-underline-fade nav ul li a:hover::before {
   opacity: 1;
}


/*==== End Underline Fade ====*/

/* === Desktop-Standard (>= 1367 px) ====================================== */
@media (min-width: 1367px) {
  .navbar-row{
    max-width: 1400px;          /* volle Desktop-Breite */
    min-height: 114px;          /* Höhe deiner Grafik */
    background-size: 100% 114px;/* falls die Leiste als 1 BG-Bild läuft */
  }
  .mainmenu .et-menu > li > a{
    font-size: 16px;
    padding: 12px 18px;
  }
  .cta .et_pb_button{
    font-size: 15px;
    padding: 12px 22px;
  }
  /* falls du Sektion 2 vertikal verschoben hast */
  .sec-nav{ transform: translateY(-36px); margin-bottom:-18px; }
}

/* === Laptop/Notebook (1024–1366 px) ==================================== */
@media (min-width:1024px) and (max-width:1366px){
  .navbar-row{
    max-width: 1200px;          /* etwas kompakter, damit alles reinpasst */
    min-height: 96px;           /* flacher */
    background-size: 100% 96px; /* Leisten-BG proportional verkleinern */
  }
  .mainmenu .et-menu > li > a{
    font-size: 15px;            /* etwas kleiner */
    padding: 10px 14px;         /* schmaler */
  }
  .cta .et_pb_button{
    font-size: 14px;
    padding: 10px 18px;         /* kompakter CTA */
  }
  .sec-nav{ transform: translateY(-28px); margin-bottom:-14px; }
}

/* === Bonus: ultrafluid statt Stufen (optional) ========================== */
/* Wenn du stattdessen alles „fließend“ willst, kannst du diese drei Regeln
   zusätzlich setzen (oder die oberen ersetzen): */
.navbar-row{ min-height: clamp(92px, 6vw, 114px); }
.mainmenu .et-menu > li > a{ font-size: clamp(14px, 1.05vw, 16px); padding: 10px clamp(12px, 1.3vw, 18px); }
.cta .et_pb_button{ font-size: clamp(13px, 1vw, 15px); padding: 10px clamp(14px, 1.3vw, 22px); }

.et-menu .menu-item-has-children>a:first-child {
    padding-right: 5px !important;
}

.et-menu .menu-item-has-children>a:first-child:after {
display: none !important;
}

/* -----------------------------
   DYNAMISCHE MENÜ-SCHRIFT FÜR LAPTOPS
   (zwischen 981px und 1600px)
------------------------------ */
@media (min-width: 981px) and (max-width: 1600px) {

  /* Top-Level-Menüpunkte (Desktop) */
  #menu-hauptmenue > li > a {
    font-size: clamp(16px, 0.9vw, 20px);
    white-space: nowrap; 
  }


  /* UL einzeilig halten */
  #menu-hauptmenue {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* -----------------------------
   OPTIONAL: Ab 1600px wieder Normalgröße
------------------------------ */
@media (min-width: 1600px) {
  #menu-hauptmenue > li > a {
    font-size: 20px; /* deine Desktopgröße */
  }
}


/* Button-Schrift für Laptop-Viewport skalieren */
@media (min-width: 981px) and (max-width: 1600px) {
  body #page-container .et_pb_section .et_pb_button_0_tb_header {
    font-size: clamp(14px, 0.9vw, 18px) !important;
  }
}

/* Ab 1600px wieder Normalgröße */
@media (min-width: 1600px) {
  body #page-container .et_pb_section .et_pb_button_0_tb_header {
    font-size: 18px !important;
  }
}

.partner-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* Abstand zwischen Logos */
  flex-wrap: wrap; /* mobil sauber umbrechen */
}

.partner-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 160px;
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (min-width: 981px) {

  header.et-l.et-l--header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 99999;
  }

  /* Sticky-Killer neutralisieren */
  #page-container,
  #et-main-area {
    overflow: visible !important;
  }

}

.et_pb_video_box video {
    width: 100% !important;
    height: auto !important;
    border-radius: 15px;
}