/*
 Theme Name:     Divi Child-Theme
 Theme URI:      https://jb-webdesign-development.de
 Description:    Child Theme CSS-Code fuer Krypto Investigation
 Author:         Jens Boller -  J|B WEBDESIGN & DEVELOPMENT
 Author URI:     https://jb-webdesign-development.de/
 Template:       Divi
 Version:        1.0
*/

/* ==========================================================================
   1. Desktop Navigation - Hauptmenü (et-menu)
   ========================================================================== */

/* Standardstil für Menülinks */
.et-menu li > a {
  color: #ffffff; /* Weiße Schriftfarbe */
  transition: color 0.3s ease; /* Sanfter Farbübergang */
  position: relative; /* Für das Pseudo-Element ::after */
}

/* Hover- und aktiver Zustand der Menülinks */
.et-menu li > a:hover,
.et-menu li.current-menu-item > a {
  color: #65b5ff !important; /* Hellblaue Farbe bei Hover oder aktivem Element */
}

/* Animierter Unterstrich bei Menülinks */
.et-menu li > a::after {
  content: ""; /* Leeres Pseudo-Element */
  position: absolute;
  bottom: -5px;
  left: 50%; /* Startet mittig */
  width: 0; /* Unsichtbar zu Beginn */
  height: 2px;
  background: linear-gradient(90deg, #65b5ff, #a1d1ff); /* Farbverlauf */
  transition: width 0.3s ease, left 0.3s ease; /* Animation bei Hover */
  transform-origin: center;
}

/* Unterstrich sichtbar machen beim Hover oder aktivem Element */
.et-menu li > a:hover::after,
.et-menu li.current-menu-item > a::after {
  width: 100%;
  left: 0; /* Startet jetzt ganz links */
}

/* Abstand zwischen Menüelementen */
.et-menu li {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* Stil für aktives Menüelement */
.et-menu li.current-menu-item > a {
  font-weight: 700; /* Fettgedruckt */
  text-shadow: 0 0 8px #65b5ff; /* Leuchtender Effekt */
}

/* Hover-Zoomeffekt für Menülinks */
.et-menu li > a:hover {
  transform: scale(1.05); /* Leichtes Vergrößern */
  transition: transform 0.3s ease;
}

/* ==========================================================================
   2. Mobile Navigation - Hamburger Menü und Ausgeklapptes Menü
   ========================================================================== */

/* X Icon im Hamburger-Menü anzeigen, wenn geöffnet */
.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d'; /* Unicode-Zeichen für X */
  color: #ffffff !important; /* Farbe des X */
  transform: rotate(180deg) scale(1.2); /* Sanfte Dreh- und Skalierungsanimation */
  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
  display: inline-block;
}

/* Basis-Stil für das Burger/X Symbol */
.mobile_menu_bar:before {
  transition: transform 0.3s ease-in-out;
  display: inline-block;
}

/* Hamburger Icon zentrieren */
.mobile_menu_bar {
  text-align: center !important;
}

/* Hintergrundfarbe des ausgeklappten mobilen Menüs */
.et_pb_module.et_pb_menu ul.et_mobile_menu {
  background-color: #10007f !important;
}

/* Entfernt die oberste Linie im mobilen Menü */
.et_mobile_menu {
  border-top: 0;
  min-width: 100vw;
  position: static !important;
  padding: 1% !important;
}

/* Mobile Menüpunkte zentriert ausrichten */
.et_mobile_menu li {
  text-align: center !important;
}

/* Entfernt Einrückung bei Untermenüs */
.et_mobile_menu li li,
.et_mobile_menu li ul {
  padding-left: 0 !important;
}

/* Zusätzliche Zentrierung für Textmodule im mobilen Menübereich */
.et_pb_module.et_pb_text_align_right {
  text-align: center !important;
}

/* Zusätzliche Seiten Einstellungen */


/* Ab Tablet-Größe (768px) auf 100% setzen */
/* Für mobile Geräte (unter 768px) */
@media (max-width: 767px) {
  .et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 20px 0; /* Falls du im mobilen Layout z. B. keine Zentrierung willst */
  }
}


/* ================================================
   Scroll-to-Top Button: Hintergrundfarben anpassen
   ================================================ */

/* Standard-Hintergrundfarbe für den Scroll-Pfeil */
.et_pb_scroll_top.et-pb-icon {
  background-color: #2a3bfd !important; /* Blau (Standardzustand) */
}

/* Hover-Zustand: dunkleres Blau beim Überfahren mit der Maus */
.et_pb_scroll_top.et-pb-icon:hover {
  background-color: #1f6292 !important; /* Dunkleres Blau (Hover-Effekt) */
}




/* ================================================
   Polylang Flaggen höher setzen
   ================================================ */

/* Nur die englische Flagge höher setzen */
.lang-item-22 img {
    position: relative;
    top: -5px; /* Anpassen falls nötig: -1px, -2px, -3px */
}

/* Nur die englische Flagge höher setzen */
.lang-item-19 img {
    position: relative;
    top: -5px; /* Anpassen falls nötig: -1px, -2px, -3px */
}

/* ================================================
   Telefon feld
   ================================================ */

/* Haupt-Container für Flagge + Eingabe */
.iti {
    display: flex !important;
    align-items: center;
    width: 100% !important;
}

/* Eingabefeld wächst mit */
.iti input {
    flex: 1 1 auto;
    width: auto !important;
}

/* Dropdown-Liste normale Breite */
.iti__country-list {
    width: auto !important;
    min-width: 250px; /* optional, für einheitliche Größe */
}

/* Punkte in der Dropdown-Liste entfernen */
.iti__country-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.iti__country {
    padding-left: 40px; /* Platz für die Flagge */
}

/* Verstecke nur das eigentliche Input-Feld im dritten Feld */
form.et_pb_contact_form input[type="text"]:nth-of-type(3) {
  position: absolute !important;  /* aus dem Fluss nehmen */
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  clip: rect(0 0 0 0) !important;  /* komplett ausblenden */
  overflow: hidden !important;
}

/* Container und Dropdown bleiben sichtbar */
form.et_pb_contact_form input[type="text"]:nth-of-type(3) ~ .intl-tel-input {
  display: block !important; /* sicherstellen, dass Container sichtbar bleibt */
}