/* ==========================================================
   CLiXX Menu Enhancer – Divi Mobile (vereinheitlicht)
   ========================================================== */

/* schmalere Navigationsleiste */

@media (max-width: 980px) {
  .et_header_style_split #main-header .mobile_nav {
    display: block;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 1px;
  }}

@media (max-width: 980px) {
  .et_header_style_split #main-header {
    padding-top: 2px;
  }}


@media (max-width: 980px) {
    .et_header_style_left 
.et-fixed-header #et-top-navigation, 
.et_header_style_left #et-top-navigation {
        padding-top: 0px;
        display: block;
        padding-bottom: 0px !important;
    }}

.mobile_menu_bar:before {
    content: "a";
    font-size: 32px;
    position: relative;
    left: 0;
    top: 0px;
    cursor: pointer;
    color: black!important;
}


/* ==========================================================
   SCHRIFTGRÖSSE DER MENÜPUNKTE ÄNDERN (Desktop / Tablet / Handy)
   → Hier stellst du die Schriftgröße der Menü-Links ein (VW-Werte).
   ========================================================== */

/* Schriftgrößen (VW) */
@media (min-width: 981px){
  .et_mobile_menu a{ font-size: 1vw!important; }     /* Desktop */
}
@media (min-width: 768px) and (max-width: 980px){
  .et_mobile_menu a{ font-size: 2.6vw!important; }   /* Tablet */
}
@media (max-width: 767px){
  .et_mobile_menu a{ font-size: 4.2vw!important; }   /* Handy */
}



/* ==========================================================
   SCHRIFTSTÄRKE der Links im Hauptmenu und Submenu
   ========================================================== */

/* Hauptmenü-Links */
.et_mobile_menu > li > a{
  font-weight: 600 !important;
}

/* Submenü-Links */
ul.et_mobile_menu ul.clixx-sub a{
  font-weight: 500 !important;
	font-style: italic;

}


/* ==========================================================
   HINTERGRUNDFARBE VOM MENÜ ÄNDERN (Hauptmenü & Submenü)
   → Hier stellst du die Fläche hinter den Menülinks ein.
   ========================================================== */

/* Menü-Hintergründe */
.et_mobile_menu{
  background:white!important;  /* Hauptmenü */
}




/*  Hintergrundfarbe des + Links */

.et_mobile_menu .menu-item-has-children>a {  background-color:white; }


/* ==========================================================
   LINK-FARBE ÄNDERN (Normal & Hover)
   → Hier stellst du die Textfarbe der Menüpunkte ein.
   ========================================================== */

/* Link-Farben */
.et_mobile_menu a{
  color: black !important;       /* Linkfarbe */
}
.et_mobile_menu a:hover{
  opacity: .9;                  /* Hover-Effekt */
}


/* ==========================================================
   PLUS-/MINUS-ICON STYLEN (Farbe, Hintergrund, Größe, Stärke)
   → Hier steuerst du den Toggle-Button (Plus/Minus).
   ========================================================== */

/* Toggle-Icon (Plus/Minus) */
.et_mobile_menu .mobile-toggle{
  background: rgba(255,255,255,.10) !important; /* Icon-Hintergrund */
  border-radius: 10px;                          /* Rundung Button */
}
.et_mobile_menu .toggle-icon,
.et_mobile_menu .toggle-icon::before{
  background: white!important;                          /* Icon-Farbe */
}

/* Größe & Strichstärke vom Icon */
.et_mobile_menu .toggle-icon{
  width: 18px;  /* Icon-Breite */
  height: 2px;  /* Icon-Stärke */
}
.et_mobile_menu .toggle-icon::before{
  width: 18px;  /* Icon-Breite */
  height: 2px;  /* Icon-Stärke */
}


/* ==========================================================
   SUBMENÜ: HINTERGRUND, LINK-FARBE & SCHRIFTGRÖSSE (Quick Edit)
   → gilt NUR für das aufgeklappte Submenü (ul.clixx-sub)
   ========================================================== */

/* Submenü-Hintergrund (aufgeklappt) */
ul.et_mobile_menu ul.clixx-sub{
  background: #0a122a !important; /* << HIER Farbe ändern */
}

/* Link-Farbe im Submenü (aufgeklappt) */
ul.et_mobile_menu ul.clixx-sub a{
  color: #ffffff !important;              /* << HIER Farbe ändern */
}

/* Submenü-Schriftgröße (VW) */
@media (min-width: 981px){
  ul.et_mobile_menu ul.clixx-sub a{ font-size: 0.9vw!important; }  /* Desktop */
}
@media (min-width: 768px) and (max-width: 980px){
  ul.et_mobile_menu ul.clixx-sub a{ font-size: 2.2vw!important; }  /* Tablet */
}
@media (max-width: 767px){
  ul.et_mobile_menu ul.clixx-sub a{ font-size: 3.6vw!important; }  /* Handy */
}



/* ==========================================================
   MENÜBREITE / POSITION AM SCREEN ÄNDERN (Mobile/Tablet)
   → Hier stellst du ein, wie breit das Mobile-Menü ist (z. B. 70vw)
     und wie es zentriert wird.
   ========================================================== */

@media (max-width: 980px) {
  .et_pb_menu .et_mobile_menu,
  .et_pb_menu .et_mobile_menu ul {
    list-style: none !important;
    text-align: left;
    width: 70vw;        /* Breite des Menüs */
    margin-left: -35vw; /* Zentrierung (halbe Breite negativ) */
  }
}


/* ==========================================================
   TREFFERFLÄCHE FÜR DAS PLUS-/MINUS-SYMBOL VERGRÖSSERN
   → Hier machst du den Button fingerfreundlich (wichtig!).
   → Zusätzlich kannst du das Icon minimal hoch/runter schieben.
   ========================================================== */

.et_mobile_menu .mobile-toggle {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute;
  right: 0;

  top: 22px!important;        /* << ICON-HÖHE FEINTUNING (z. B. +20px) */
  transform: translateY(-50%);

  z-index: 999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 76px;   /* << TREFFERFLÄCHE rechts (größer = leichter treffen) */
  height: 56px;  /* << TREFFERFLÄCHE Höhe (größer = leichter treffen) */

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   BASIS: DAMIT DER TOGGLE IMMER AN DER RICHTIGEN STELLE BLEIBT
   → Technischer Block: sorgt dafür, dass das Plus nicht nach unten wandert,
     wenn das Submenü aufgeklappt wird.
   ========================================================== */

ul.et_mobile_menu li.menu-item-has-children,
ul.et_mobile_menu li.page_item_has_children {
  position: relative;
}

/* Toggle sitzt am Parent-Link – damit er NICHT nach unten wandert */
.et_mobile_menu li.menu-item-has-children > a,
.et_mobile_menu li.page_item_has_children > a{
  position: relative;
  display: block;
}

/* Divi Standard-Pfeil ausblenden */
.et_mobile_menu .menu-item-has-children > a:after,
.et_mobile_menu .page_item_has_children > a:after {
  display: none !important;
}


/* ==========================================================
   ANIMATION: PLUS WIRD ZU X (ÖFFNEN / SCHLIESSEN)
   → Hier wird aus dem Plus beim Öffnen ein X.
   ========================================================== */

.toggle-icon {
  position: relative;
  display: block;
  transition: transform 1.25s ease;
}
.toggle-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(90deg);
  transition: transform 1.25s ease;
}
li.dt-open .mobile-toggle .toggle-icon { transform: rotate(45deg); }
li.dt-open .mobile-toggle .toggle-icon::before { transform: rotate(-45deg); }




/* ==========================================================
   SUBMENÜ EINRÜCKUNG & AUFKLAPP-ANIMATION
   → Hier steuerst du: Einzug, Animation, und „wie weich“ das aufklappt.
   ========================================================== */

ul.et_mobile_menu li {
  position: relative;
  overflow: visible;
}

ul.et_mobile_menu ul.clixx-sub {
  margin: 0;
  padding: 0 0 0 16px; /* Submenü-Einrückung (mehr = weiter rechts) */
  list-style: none;

  max-height: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-5px);

  transition: max-height .55s ease, opacity .55s ease, transform .55s ease;
  visibility: hidden;
}

ul.et_mobile_menu ul.clixx-sub.visible {
  max-height: 2000px;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Submenü-Items „gleiten“ leicht rein */
ul.et_mobile_menu ul.clixx-sub li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .55s ease, transform .55s ease;
}
ul.et_mobile_menu ul.clixx-sub.visible li {
  opacity: 1;
  transform: translateX(0);
}



/* ==========================================================
   ABSTAND RECHTS AM LINK (PLATZ FÜR DEN TOGGLE-BUTTON)
   → Damit Text und Toggle nicht übereinander liegen.
   ========================================================== */

.et_mobile_menu > li > a,
.et_mobile_menu .menu-item-has-children > a,
.et_mobile_menu .page_item_has_children > a {
  padding-right: 86px; /* Platz für die große Trefferfläche */
}




/* ==========================================================
   DESKTOP: TOGGLE AUSBLENDEN
   → Auf Desktop brauchst du kein Plus im normalen Menü.
   ========================================================== */

@media (min-width: 981px) {
  .et_mobile_menu .mobile-toggle { display: none; }
}



@media (max-width: 980px){

  /* Header insgesamt flacher */
  #main-header{
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  /* Container im Header: Divi bringt hier oft unnötig Luft rein */
  #main-header .container{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hamburger/Close-Button: weniger “Luft” => weniger Headerhöhe */
  #main-header .mobile_menu_bar{
    padding: 6px 0 !important;        /* runter/rauf nach Geschmack */
    line-height: 1 !important;
  }

  /* Optional: falls Logo/Branding den Header hochzieht */
  #main-header #logo{
    max-height: 34px !important;      /* anpassen, wenn du’s kleiner willst */
  }
}