/*
 Theme Name:     Divi Child
 Theme URI:      https://allerhand.design
 Description:    Child Theme
 Author:         Thomas R. Jörger
 Author URI:     https://allerhand.design
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/************ PREISE BANNER ******************/
/* Container vorbereiten */
.bestseller-badge {
    position: relative !important;
    overflow: hidden; /* Wichtig, damit das schräge Banner nicht übersteht */
}

/* Das Banner selbst */
.bestseller-badge::before {
    content: "BELIEBT";
    position: absolute;
    top: 18px;            /* Abstand von oben */
    right: -32px;         /* Position nach rechts außen */
    width: 130px;         /* Breite des Textfeldes */
    background-color: #ad9551; /* Ein Gold-Braun oder deine Akzentfarbe */
    color: #ffffff;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 4px 0;
    transform: rotate(45deg); /* Der schräge Winkel */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
    pointer-events: none;
}

/**************** END **********************/



/***** Länderwappen vor Button *****/
/***** Länderwappen vor Button - FIXED *****/

/* Wir sprechen NUR das Text-Innere an, wenn es INNERHALB eines Button-Links liegt */
.custom-chf-button, 
.custom-eur-button {
    display: flex !important;
    flex-direction: row !important; /* Nebeneinander (Icon & Text) */
    align-items: center !important;
    justify-content: center !important;
    
    /* FIXE GRÖSSE */
    width: 280px !important;
    height: 46px !important; 
    overflow: hidden !important; 
    
    background-color: #438d91 !important;
    color: #ffffff !important;
    margin: 8px auto !important; /* Zentriert den Button in der Spalte */
    padding: 0 !important;
    
    border-radius: 50px !important;
    border: 2px solid #438d91 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    
    /* Hier korrigieren wir die Line-Height nur für den Button */
    line-height: 1.2 !important; 
}

/* Entferne den allgemeinen .et_pb_text_inner Block komplett! */

/* 3. Hover-Effekt (Invertierung) */
.custom-chf-button:hover, 
.custom-eur-button:hover {
    background-color: #d8eceb !important;
    color: #438d91 !important;
}

/* 4. Das Innere (Icon & Text) bändigen */
.custom-chf-button .button-icon,
.custom-eur-button .button-icon {
    width: 20px !important;
    height: 20px !important; /* Quadratisch fixieren */
    margin-right: 10px !important;
    object-fit: contain !important;
    display: block !important;
}

.custom-chf-button span,
.custom-eur-button span {
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1 !important; /* Verhindert das Aufblähen von innen */
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/********** MENU HERZ ******************/

/* 1. GRUNDZUSTAND & ANIMATION */
@keyframes herzschlag {
    0% { transform: translateX(-50%) scale(1); }
    14% { transform: translateX(-50%) scale(1.3); }
    28% { transform: translateX(-50%) scale(1); }
    42% { transform: translateX(-50%) scale(1.3); }
    70% { transform: translateX(-50%) scale(1); }
}

.et_pb_menu .nav li a {
    position: relative !important;
    padding-top: 25px !important;
}

/* Das Herz (Standard: Teal) */
.et_pb_menu .nav li a::before {
    content: "" !important; /* Unicode: U+1F496, UTF-8: F0 9F 92 96 */
	background-image: url('https://anjajoerger.life/wp-content/uploads/2026/03/heart_icon.png');
	width: 15px;
	height: 15px;
	background-size: contain;
	background-repeat: no-repeat;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    font-size: 16px !important;
    color: #2d878d !important; /* Dein Teal-Ton */
    opacity: 0 !important;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease !important;
}

/* 2. HOVER & AKTIVER LINK (Anzeigen) */
.et_pb_menu .nav li a:hover::before,
.et_pb_menu .nav li.current-menu-item a::before {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Nur beim Hover soll es schlagen */
.et_pb_menu .nav li a:hover::before {
    animation: herzschlag 1.2s infinite ease-in-out !important;
}

/* 3. STICKY MODUS (Farbe auf Weiß ändern) */
/* Wir nutzen mehrere Selektoren, um Divi 5 sicher zu "fangen" */
.et_pb_section.et_pb_sticky_element .et_pb_menu .nav li a::before,
.et_pb_sticky .et_pb_menu .nav li a::before,
.et_pb_section_sticky .et_pb_menu .nav li a::before {
    color: #ffffff !important;
}

/* Sicherstellen, dass das aktive Herz im Sticky-Modus auch weiß bleibt */
.et_pb_section.et_pb_sticky_element .et_pb_menu .nav li.current-menu-item a::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/******************** END *********************/

/************** Mandala Kontakt Animation ***************/
	
@keyframes rotate {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
	

.ad-manadala-transform {
	animation: rotate 120s linear infinite;
}