/*
 Theme Name:   Beauty Child
 Description:  Child Theme
 Author:       René Braun
 Author URI:   https://www.renebraun.de
 Template:     beauty
 Version:      1.0
 Text Domain:  beauty-child
*/

:root {
	--ci-gruen: #3C591F;
    --ci-beige: #FDFBF7;
	--ci-text-color: #1A260D;
	
	--ci-gruen-hell-20: #637a4c;
	--ci-gruen-hell-40: #8a9b79;
	--ci-gruen-hell-60: #b1bda5;
	--ci-gruen-hell-80: #d8ded2;
	--ci-gruen-hell-90: #eceee9;
}

a:hover {
	cursor: pointer !important;
}

/* MOBILOPTIMIERUNG */
/* Footer */
@media only screen and (max-width: 767px) {
	#footer-newsletter-reconstructed .elementor-widget-button,
	#footer-newsletter-reconstructed .elementor-widget-button a {
		width: 100%;
	}
	
	#phone-button-fixed a {
		font-size: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		padding: 15px;
	}
	#phone-button-fixed a .elementor-button-icon {
		transform: scale(0.8);
	}
	#buttons-footer-phone-wrapper {
		justify-content: flex-end;
    	left: 20px;
	}
}
/* Popup */
@media only screen and (max-width: 425px) {
	body .popup-two-columns .popup-column {
    	padding: 30px 20px !important;
	}
}
/* Startseite */
@media only screen and (max-width: 425px) {
	.as-row-mobile {
		flex-direction: row;
	}
	.as-row-mobile > .elementor-element:first-child {
		max-width: 28% !important;
	}
	.as-row-mobile > .elementor-element:last-child {
		max-width: 52% !important;
	}
}
/* Kopfhaut */
@media only screen and (max-width: 425px) {
	#kopfhaut-e6-bild-mobil {
		order: 1;
		margin-bottom: 40px;
	}
	#kopfhaut-e6-text-mobil {
		order: 2;
	}
	#kopfhaut-e6-buttons-mobil {
		order: 3;
	}
}
/* Haarausfall */
@media only screen and (max-width: 425px) {
	#haarausfall-e3-image {
		background-image: url(/wp-content/uploads/2026/03/fo-u-haarausfall-e4-b2.webp) !important;
	}
}
/* Friseurleistungen */
@media only screen and (max-width: 425px) {
	#friseurleistungen-e4-bild {
		order: 1;
	}
	#friseurleistungen-e4-text {
		order: 2;
	}
	#preise .friseurleistungen-e5-preis {
		display: none;
	}
}
/* Friseurleistungen */
@media only screen and (max-width: 425px) {
	#kontakt-e2::before {
		background-image: none;
	}
	#kontakt-e4 {
		border-bottom: none !important;
	}
	#kontakt-e4-rechts-wrapper {
		border-left: none !important;
	}
	.page-id-2404 #verwendeter-footer > div {
		padding-top: 40px !important;
	}
}