/**
 * Tunnelsoft Mega Menü Individuelle Stile
 * 
 * Dieses Stylesheet enthält benutzerdefinierte Stile für das Tunnelsoft Mega Menü,
 * das UberMenu als Basis verwendet. Erhöhte Spezifität wird durch !important 
 * Deklarationen erreicht, wo notwendig.
 *
 * Inhaltsverzeichnis:
 * 1. Layout & Raster-Struktur
 * 2. Navigationselemente
 * 3. Lösungen-Menü
 *    3.1 Übersicht-Button
 *    3.2 Banner-Button
 *    3.3 Info-Banner
 *    3.4 Tab-Navigation
 * 4. Über Uns Menü
 * 5. Sprachumschalter
 * 6. Download-Bereich
 * 7. Features-Menü
 * 8. Submenu Icons / Hover Arrow
 */

/* 1. Layout & Raster-Struktur
   ========================================================================== */
nav.ubermenu > ul {
  display: flex !important;
  align-items: center;
}

li.solutions-with-tab-menu > ul.ubermenu-submenu {
  display: grid !important;
  grid-template-columns: 1fr 25%;
  grid-template-rows: 1fr 70px;
}

nav.et-menu-nav,
.et_pb_menu__menu,
nav.ubermenu
{
  width: 100% !important;
}

.search-submenu {
  margin-left: auto !important;
}

/* 2. Navigationselemente
   ========================================================================== */
nav.ubermenu .language-switcher-div {
  display: flex !important;
  align-items: center !important;
}

li.gray-title > a > span.ubermenu-target-title {
  color: #666666 !important;
}

/* CSS um den Fokus beim Klicken zu verhindern
.ubermenu-target:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.ubermenu-target:focus-visible {
    outline: 2px solid black !important;
    outline-offset: 2px;
}
*/
/*
li.ubermenu-tab:hover > a .ubermenu-target-title,
li.ubermenu-tab.ubermenu-active > a .ubermenu-target-title {
    text-decoration: underline !important;
}
*/
.solutions-overview-button:hover a {
    text-decoration: underline !important;
    transition: all .4s;
    font-weight: 600;
    color: #009051 !important;
}

li.solutions-small-menu > ul > li.ubermenu-item:hover > a > span,
li.about-us-menu > ul > li.ubermenu-item:hover > a > span,
li.features-menu> ul > li.gray-title> ul > li:hover > a > span,
li.ubermenu-tab > ul ul > li:hover > a >  span.ubermenu-target-title {
    text-decoration: underline !important;
    transition: all .4s;
    font-weight: 600;
    color: #009051 !important;
    }


.solutions-small-menu > a > .ubermenu-target-title,
.about-us-menu > a > .ubermenu-target-title,
.use-cases-menu > a > .ubermenu-target-title {
 white-space: nowrap;
}
/* Fokus-Box-Shadow überschreiben */
.ubermenu-accessible input:not(:hover):focus, .ubermenu-accessible:not(:hover) .ubermenu-target:focus {
  box-shadow: none !important;
}
/* Fokus beim Logo anzeigen */
div.et_pb_menu__logo:focus-within {
  outline: 2px solid #000000 !important;
  offset: 2px !important;
}

/* 3. Lösungen-Menü
   ========================================================================== */
/* 3.1 Übersicht-Button */
.solutions-with-tab-menu .overview-button {
  box-shadow: 0 -5px 10px -5px rgba(115, 115, 115, 0.75);
}

.solutions-with-tab-menu .overview-button div {
  height: 70px;
  display: flex;
  align-items: center;
}

.solutions-with-tab-menu .overview-button a {
  color: #333;
  display: flex;
  gap: 3px;
  align-items: center;
}
li.solutions-with-tab-menu li.gray-title > span > span.ubermenu-target-title {
  color: #666666 !important;
}

.solutions-with-tab-menu .overview-button a::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../../../../wp-content/uploads/2024/10/icon_arrow_black.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
  vertical-align: middle;
}

.solutions-with-tab-menu .overview-button a:hover {
  color: #009051 !important;
  /* text-decoration: underline; */
  transition: all 0.5s ease-out;
}

/* 3.2 Banner-Button */
.solutions-with-tab-menu a.banner-button {
  background-color: #edf02e !important;
  border-radius: 12px !important;
  padding: 6px !important;
  margin: 15px 5px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 10px;
  line-height: 1 !important;
  color: #000000 !important;
  margin-top: auto !important;
}

.solutions-with-tab-menu a.banner-button span {
  padding: 5px 0 !important;
}

.solutions-with-tab-menu a.banner-button strong {
  word-wrap: break-word;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}

.solutions-with-tab-menu a.banner-button::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../../../../wp-content/uploads/2024/10/icon_arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
  order: -1;
}
.solutions-with-tab-menu a.banner-button:focus {
  outline: 2px solid #ffffff !important;
}

/* 3.3 Info-Banner */
li.info-banner {
  grid-column: 2;
  grid-row: 1 / span 2;
}

li.info-banner ul,
li.info-banner li {
  padding: 0 !important;
  height: 100% !important;
}

li.info-banner .wp-block-column {
  display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 15px;
}

li.info-banner li div {
  height: 100%;
}

li.info-banner li p {
  padding: 0 10px;
}

/* 3.4 Tab-Navigation */
li.solutions-with-tab-menu ul.ubermenu-tabs-group li a {
  display: flex !important;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: start;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

li.solutions-with-tab-menu ul li.ubermenu-item ul li.ubermenu-tab  ul  li.gray-title  ul  li.ubermenu-item  a  span.ubermenu-target-description {
  font-weight: 600 !important;
  color: #666666 !important;
}

li.solutions-with-tab-menu ul.ubermenu-tabs-group > li::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 80%;
    border-bottom: 1px solid #1A1A18;
}

li.solutions-with-tab-menu ul.ubermenu-tabs-group .ubermenu-tab.ubermenu-active .ubermenu-target {
  background-color: transparent!important;
}

li.solutions-with-tab-menu ul.ubermenu-tabs-group > li:last-child::after {
    content: none;
}

li.solutions-with-tab-menu ul.ubermenu-tabs-group li a img {
  margin-top: 9px !important;
}

li.solutions-with-tab-menu ul.ubermenu-tabs-group li.ubermenu-active img {
  filter: grayscale(0);
}

li.solutions-with-tab-menu ul.ubermenu-tabs-group li img {
  filter: grayscale(1);
}

li.solutions-with-tab-menu ul.ubermenu-tab-content-panel li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

li.solutions-with-tab-menu ul.ubermenu-tab-content-panel {
  min-height: 100% !important;
}

li.solutions-with-tab-menu ul.ubermenu-tab-content-panel ul.ubermenu-submenu li {
  padding-top: 10px !important;
}

li.solutions-with-tab-menu ul.ubermenu-tab-content-panel ul.ubermenu-submenu li:first-child {
  padding-top: 0px !important;
}

li.solutions-with-tab-menu ul.ubermenu-tabs-group .ubermenu-tab-content-panel {
  box-shadow: -5px 0 10px -5px rgba(115, 115, 115, 0.75);
}

/* 4. Über Uns Menü
   ========================================================================== */
li.about-us-menu > ul > li > a {
  padding-top: 15px !important;
  padding-bottom: 0 !important;
}

li.about-us-menu > ul > li:last-child > a {
  padding-bottom: 20px !important;
}

/* 4. Small Menü (Übergangsmenü)
   ========================================================================== */
li.solutions-small-menu > ul > li > a {
  padding-top: 15px !important;
  padding-bottom: 0 !important;
}

li.solutions-small-menu > ul > li:last-child > a {
  padding-bottom: 20px !important;
}

/* 5. Download-Bereich
   ========================================================================== */
li.download-buttons {
  max-width: 300px !important;
}

li.download-buttons ul {
  display: flex;
  flex-direction: column;
}

li.download-buttons ul li {
  width: 100% !important;
  padding-left: 0 !important;
}

/* 6. Features-Menü
   ========================================================================== */
.features-menu ul .gray-bg {
  background-color: #D9DADA;
  padding-bottom: 200px;
}

/* 7. Die Hover-Effekte der Items 
   ========================================================================== */
li.ubermenu-current_page_item > a > .ubermenu-target-title,
li.ubermenu-active > a > .ubermenu-target-title {
  font-weight: bold !important;
}

/* 8. Submenu Icons / Hover Arrow
   ========================================================================== */
li.ubermenu-has-submenu-drop.ubermenu-active > a > i.ubermenu-sub-indicator::before {
  transform: rotate(180deg);
}

li.ubermenu-has-submenu-drop > a > i.ubermenu-sub-indicator::before {
  display: inline-block;

}