/*
Theme Name: MINTvision Child
Theme URI: https://MINTvision.de
Version: 1.0
Description: Child Theme für MINTvision
Author: MINTvision
Template: Divi
*/
/* MENÜ */
/*Logo hover */
.et-l--header .et_pb_image .et_pb_image_wrap img[src*=".svg"]:hover {
  transform: scale(1.08)!important;
}
/*****************************************/
/*********| FULLSCREEN MENU CSS |*********/
/*****************************************/

/* Move the hamburger to the right of the header */
.de-burger-menu .et_pb_menu__wrap {
  justify-content: flex-end !important;
}
.de-burger-menu #mobile_menu1 li a {
	font-weight:400;
}
.logo-im-menu {
        background-image: url(/wp-content/uploads/2024/02/MINTvision-logo.svg);
        background-size: contain;
        background-repeat: no-repeat;
        height: 50px;
        display: inline-block;
        text-indent: -9999px;
        background-position: center;
        margin: -10vh 0vh 3vh;
    }
.logo-im-menu:hover {
    filter: brightness(1.5); /* Erhöht die Helligkeit um 50% */
  transform: scale(1.1)!important; /* Enlarge the hovered menu item by 25% when hovered */
    }

@media (min-width: 980px) {
.de-burger-menu .mobile_nav.closed {
  transform: scale(1.1); /* Enlarge the hovered menu item by 25% when hovered */
}
}
.de-burger-menu .mobile_nav.closed:hover {
  transform: scale(1.25); /* Enlarge the hovered menu item by 25% when hovered */
}

/* Hide the desktop menu */
.de-burger-menu .et_pb_menu__wrap .et_pb_menu__menu {
  display: none !important;
}

/* Force the mobile version of the menu */
.de-burger-menu .et_pb_menu__wrap .et_mobile_nav_menu {
  display: block !important;
  align-items: center !important;
}
/* Burger Menu Klickbereich */
.et_pb_module .mobile_menu_bar:before {
    top: -30px!important;
}
.de-burger-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
    top: 0px !important;
}
/* Fullscreen Menu Style when Opened */
.de-burger-menu .opened #mobile_menu1,
.de-menu-bg-container {
  width: 100vw !important; /* Make it span the full width of the viewport */
  position: fixed !important;
  top: -32px!important;
  left: 0 !important;
  height: 100vh !important; /* Make it span the full height of the viewport */
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  transition: visibility 0.3s, opacity 0.3s ease-in-out; /* Animate the menu to fade in */
  padding: 0 !important;
}

/* Show fullscreen menu */
.de-burger-menu .opened #mobile_menu1 {
  opacity: 1 !important; /* Make it visible by setting opacity to 1 */
  visibility: visible !important; /* Show the menu */
}

/* Hide fullscreen menu background initially */
.de-menu-bg-container {
  opacity: 0;
  pointer-events: none; /* Ensure the mouse cannot interact with the invisible menu background */
}

/* Hide and fade out the Menu when closed */
.de-burger-menu .closed #mobile_menu1 {
  opacity: 0 !important; /* Make it invisible by setting opacity to 0 */
  visibility: hidden !important; /* Hide the menu */
  transition: visibility 0.3s, opacity 0.3s ease-in-out !important; /* Animate the menu to fade out */
}

/* Remove Bullets next to LI Elements */
.de-burger-menu #mobile_menu1 li {
  list-style: none !important;
  text-align: center !important;
  width: 100%;
}

/* Fullscreen Menüpunkte */
.de-burger-menu #mobile_menu1 li a  {
	text-transform:uppercase;
	border-bottom: 1px solid;
	position: relative!important;
    overflow: hidden!important;
	transition: color .2s;
    height: 1em;
	width:100%;
    line-height: 1em;
	padding-bottom:5vh!important;
	padding-top:2.5vh!important;
	box-shadow:none!important;
}
@media (max-width:500px) {
.de-burger-menu #mobile_menu1 li a  {
	padding-bottom:6.5vh!important;
	padding-top:2.5vh!important;
	}
}
.de-burger-menu #mobile_menu1 li:last-child a {
	border-bottom: none;
}
/* Remove the hover background from the menu items and add hover animation */
.de-burger-menu .et_mobile_menu li a:hover {
  opacity: 1;
  transition: transform 0.3s ease-in-out !important; /* Animate the menu item when hovered */
  transform: scale(1.15); /* Enlarge the hovered menu item by 15% when hovered */
  background:none!important;
}
/* Make sure that the menu is above other elements */
.de-burger-menu .et_pb_menu__wrap span.mobile_menu_bar {
  z-index: 99999 !important;
}

/* Set the close icon for when the menu is open */
.de-burger-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
    color: white !important; /* Farbe des X */
    content: '\4d' !important; /* Unicode für das X-Symbol */
    left: 0px;
    z-index: 999999 !important;
    opacity: 1 !important;
    font-size: 67px; /* Größe des X-Symbols */
}
/* Remove mobile menu border */
.de-burger-menu .et_mobile_menu {
  border-top: none;
}

/* Make sure the menu items do not show a background */
.de-burger-menu .et_mobile_menu .menu-item-has-children > a {
  background-color: transparent;
}

/* Remove menu item bottom borders */
.de-burger-menu .et_mobile_menu li a {
  border-bottom: none;
}

/* Reveal and Hide Background Text Container */
.de-menu-bg-show,
.de-menu-text-show {
  visibility: visible;
  opacity: 1 !important;
}

.de-menu-bg-text {
  display: flex;
  justify-content: center; /* Centers the text */
  white-space: nowrap; /* Prevents the text from wrapping when the viewport becomes smaller */
  margin-left: -100%; /* Create enough space for overflow */
  margin-right: -100%;
}

/* Burger Menu Icon Styles */
.de-burger-menu .mobile_nav.closed {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 34px;
}

/* Striche des Burger-Menüs */
.de-burger-menu .mobile_nav.closed:before,
.de-burger-menu .mobile_nav.closed:after,
.de-burger-menu .mobile_nav.closed span {
  content: '';
  display: block;
  position: absolute;
  height: 4.8px;
  border-radius: 10px; /* Abrundung der Striche */
  transition: all 0.3s ease;
}
@media (max-width: 768px) 
	{
.de-burger-menu .mobile_nav.closed:before, .de-burger-menu .mobile_nav.closed:after, .de-burger-menu .mobile_nav.closed span {
  height: 4.3px;
}
	}
/* Oberer Strich */
.de-burger-menu .mobile_nav.closed:before {
  top: 0;
  width: 49px; /* Länge des oberen Striches */
  transform: rotate(20deg);
}

/* Mittlerer Strich */
.de-burger-menu .mobile_nav.closed span {
  top: 55%;
  width: 36px; /* Länge des mittleren Striches */
  transform: translateY(-50%);
}

/* Unterer Strich */
.de-burger-menu .mobile_nav.closed:after {
  bottom: 0;
  width: 29px;
  top: 95%;
  transform: rotate(-10deg);
}

/* Hide the default hamburger lines */
.de-burger-menu .et_pb_menu__wrap .mobile_menu_bar:before {
  opacity: 0!important;
}

/* =======================
   FARBWÄHLER – Desktop & Allgemein
   ======================= */

/* Container für den Farbwähler im Menü */
.color-selector {
    display: flex;
    align-items: center;
    margin-right: 20px; /* Abstand nach rechts, um Platz für andere Menüelemente zu lassen */
    padding: 0;
}

/* Text links mit Abstand */
.color-selector p {
    margin-right: 10px;
    line-height: normal;
}
@media (min-width: 1065px) {
.color-selector p {
    font-size: 21px!important;
}
}
/* Container für die Farbfelder */
.color-options {
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center;     /* Zentriert vertikal */
    gap: 10px;               /* Abstand zwischen den Farbfeldern */
}

/* Einzelnes Farbfeld */
.color-option {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.color-option:hover {
    transform: scale(1.25); /* Vergrößert beim Hover */
}

/* ACTIVE – überall gleich, außerhalb Media Query */
.color-option.active {
    box-shadow: 0 0 6px rgba(161, 216, 208, 0.9) !important;
}

/* Zentrierung in der Spalte (Divi-spezifisch) */
.et_pb_column_1_tb_header {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Button-Stil für den Text "Wähle deine Farbe" */
#waehle-deine-farbe {
    padding: 8px 0px 8px 15px;
    border-radius: 60px;
    background-color: var(--background-color)!important;
}

/* =======================
   RESPONSIVE – max-width: 980px
   ======================= */

@media (max-width: 980px) {
    /* Hauptcontainer: Text oben, Kreise darunter, alles zentriert */
    #waehle-deine-farbe {
        display: flex;
        flex-direction: column;  /* Text oben, Kreise darunter */
        align-items: center;     /* horizontal zentriert */
        justify-content: flex-start; /* Text oben */
        padding: 3px 12px 0px;
        height: auto;
        text-align: center;      
        overflow: visible !important; /* Schatten darf sichtbar sein */
        position: relative; /* für z-index der Kreise */
    }

    /* Innerer Container */
    #waehle-deine-farbe .et_pb_code_inner,
    #waehle-deine-farbe .color-selector {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow: visible !important;
        position: relative;
	    margin-right: 2px!important;
    }

    /* Text über den Kreisen */
    .color-selector p.hand {
        margin-bottom: 3px;
        text-align: center;
        width: 100%;
    }
.color-selector p {
    margin-right: 0px;
}
    /* Pfeil --> auf Mobile ausblenden */
  .color-selector .arrow {
      display: none; /* Pfeil auf Mobile ausblenden */
  }

    /* Kreise in einer Reihe zentrieren */
    .color-options {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: relative; /* Shadow darf sichtbar sein */
        padding-bottom: 10px; /* Platz für Box-Shadow */
        overflow: visible !important;
    }

    /* Einzelne Farbfelder */
    .color-option {
        width: 33px;
        height: 33px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative; /* Shadow sichtbar */
        z-index: 1;
    }

    /* Aktives Farbfeld mit Box-Shadow */
    .color-option.active {
        box-shadow: 0 0 6px rgba(161, 216, 208, 0.9) !important;
        z-index: 10; /* sicherstellen, dass Shadow sichtbar ist */
    }
}



/* TYPOGRAPHIE */
.hand p, p.hand, span.hand, .hand span,  h2.hand {
    font-family: "rollerscript-smooth", "Helvetica Neue", "Segoe UI", system-ui, sans-serif!important;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    line-height: 1.3em;
}
h1 span.hand, h2 span.hand {
    margin-top:10px;
	padding-bottom:0px;
	display: block;
	line-height:1.1em;
}
p, body {
    font-family: "acumin-pro", "Helvetica Neue", "Segoe UI", system-ui, sans-serif!important;
    font-weight: 200;
    font-style: normal;
}
p strong {
    font-family: "acumin-pro", "Helvetica Neue", "Segoe UI", system-ui, sans-serif!important;
    font-weight: 500;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "acumin-pro-condensed", "Helvetica Neue Condensed", "Arial Narrow", "Segoe UI Condensed", system-ui, sans-serif!important;
    font-weight: 700;
    font-style: normal;
}
.bild-untertitel-klein h2 {
	font-size:10px!important;
font-weight: 300;
    text-transform: uppercase;
}
/* Zurücksetzen der h3-Überschrift-Stile von Divi */
h3 {
    color: initial; /* Setzt die Schriftfarbe auf den Standardwert zurück */
}
.et_pb_slide_description, p, h1, h2, h3, h4, h5, h6, .et_pb_bg_layout_dark .et_pb_slide_description {
    text-shadow:none!important;
}
/*TYPO ENDE*/
/* scroll behavior */
html {
  scroll-behavior: smooth;
}
/* BUTTONS */
.custom-hover-column a.et_pb_button,
.custom-hover-column .et_pb_button,
.button-1 a,
.button-1 .et_pb_button,
.button-grid a,
.et_pb_button, .et_button_no_icon .et_pb_button, .custom-hover-column a.et_pb_button:hover,
.custom-hover-column .et_pb_button:hover,
.button-1 a:hover,
.button-1 .et_pb_button:hover,
.button-grid a:hover,
.et_pb_button:hover,
.et_button_no_icon .et_pb_button:hover {
    display: inline-block;        /* Für margin: 0 auto und width fit-content */
    width: fit-content;
    height: auto;
    position: relative;
    margin: 0 auto;
    border-radius: 30px !important;
    padding: 0.1em 1.4em 0.35em 1.4em !important;
    font-family: "acumin-pro-condensed", "Helvetica Neue Condensed", "Arial Narrow", "Segoe UI Condensed", system-ui, sans-serif!important;
    font-weight: 500 !important;
    text-transform: none !important;
    line-height: 1.6 !important;
	font-size:17px!important;
	border:none!important;
}
body .et_pb_button.kontakt {
	border-radius:0px!important;
	font-family: "acumin-pro", "Helvetica Neue", "Segoe UI", system-ui, sans-serif!important;
    font-weight: 500!important;
	text-transform: none!important;
}
.et_pb_button.kontakt:hover, .dsm_button_0_tb_footer .et_pb_button_one.et_pb_button:hover, .et_pb_button_one.et_pb_button.kontakt:hover 
{
border-radius: 0px !important; 
font-family: "acumin-pro", "Helvetica Neue", "Segoe UI", system-ui, sans-serif!important;
line-height: 1.6 !important;
}
/* Startseite - Gallerie Bilder desaturiert */
.dipi_image_showcase.desaturate-bg,
.et_pb_image.desaturate-bg {
  position: relative !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
.dipi_image_showcase.desaturate-bg::before,
.et_pb_image.desaturate-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.et_pb_image.desaturate-bg img {
  position: relative !important;
  z-index: 1 !important;
  filter: none !important;
  mix-blend-mode: normal!important;
}
/* Startseite - Gallerie Bilder desaturiert END */

/* Kreative Logoentwicklung Slider*/
.dipi-image-gallery-thumbs .dipi_image_gallery_child .swiper-slide-container {
    opacity: 0.3;
    transition: opacity 0.7s;
}
.dipi-image-gallery-thumbs .dipi_image_gallery_child .swiper-slide-container:hover, .dipi-image-gallery-thumbs .swiper-slide-active .swiper-slide-container {
    opacity: 1;
}
/* WEBDESIGN-UMFRAGE */
.wpforms-field.section-divider input {
  display: none!important;
}
.wpforms-field.section-divider label {
  font-size: 1.4rem!important;
  font-weight: bold!important;
  margin-top: 0.5em!important;
margin-bottom:0em!important;
  display: block;
}
.pum-container p {
    padding-bottom: 0.45em;
}
/* WEBDESIGN UMFRAGE BESTÄTIGUNG */
.wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: transparent !important;
    border:none!important;
}
/*FOOTER*/
/* Footer-Menü immer als Vollbild-Menü anzeigen */
/*show desktop menu on phone*/

@media (max-width: 980px) {
/* Versteckt das Burger-Menü */
footer .et_mobile_nav_menu {
    display: none !important;
}
/* Stellt sicher, dass das normale Menü auch auf mobilen Geräten sichtbar bleibt */
footer .et_pb_menu__menu, .et_pb_menu_0_tb_footer {
    display: flex !important;
}
}
.unterster-footer a {
	border-radius:30px;
	padding: 0px !important;
}
.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li {
    margin-top: 5px;
}
.et_pb_menu_0_tb_footer.et_pb_menu .et-menu-nav li a:hover, .unterster-footer a:hover {
    transform: scale(1.1); /* Vergrößert beim Hover */
}
/*FOOTER ende*/

/* in Borlabs hinterlegt unter ERSCHEINUNGSBILD 
#BorlabsCookieBox .brlbs-cmpnt-card *, .brlbs-cmpnt-container .brlbs-cmpnt-card *, #BorlabsCookieBox p {
    color: black!important;
}
#BorlabsCookieBox .brlbs-cmpnt-btn.brlbs-cmpnt-font-semibold, .brlbs-cmpnt-container .brlbs-cmpnt-btn.brlbs-cmpnt-font-semibold {
font-size:17px!important;
font-family: "acumin-pro-condensed", "Helvetica Neue Condensed", "Arial Narrow", "Segoe UI Condensed", system-ui, sans-serif!important;
font-weight: 500 !important;
text-transform: none !important;
line-height: 1.1!important;
padding:8px 6px 11px!important;
}
*/