/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
Styling: LOXE photos
*/



/* Allgemein */

	#Sliding-top {
		display: none;
	}

	#Top_bar .container {
		padding-left: 80px;
		padding-right: 80px;
		max-width: 100vw;
	}

	#Top_bar .menu-main-menu li a {
		font-size: 15px;
	}

	#Top_bar .top_bar_right .action_button {
		border-width: 2px;
		font-size: 15px;
		padding: 10px 20px;
	}

	#Top_bar .responsive-menu-toggle,
	#Header_creative .creative-menu-toggle,
	#Header_creative .responsive-menu-toggle {
		color: #ffc2e5;
	}

	#Side_slide a.action_button {
		border-color: #65002e;
		color: #65002e;
		border-width: 1px;
		font-size: 15px;
	}

	a.button {
		transition-duration: .3s;
		transition-property: transform;
		transition-timing-function: ease-out;
	}

	a.button:hover {
		transform: translateY(-8px);
	}

	#Top_bar a.button:hover {
		transform: none;
	}

	footer a {
		color: white!important;
	}

	footer .mfn-megamenu-menu {
		font-size: 16px;
	}


/* Icon */

	.icon-shadow .image_frame {
		box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	}

	.icon-shadow img {
		filter: drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.3));
	}

/* Dunkelrote-Section animiert */

	.section-animation-red h2 {
    font-family: "Loxe-Quablo-Medium";
    font-size: 28px;
    line-height: 1;
}

.section-animation-red {
    position: relative !important;
    overflow: hidden !important;
}

/* Animierte Hintergrundgrafik */
.section-animation-red::after {
    content: "";
    position: absolute;
    top: -560px;
    left: 60%;
    width: 450%;
    aspect-ratio: 3 / 1;
    background-image: url("/wp-content/uploads/2026/08/emotionwaves-8.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateX(-50%);  
    z-index: 0;
    pointer-events: none;
    animation: gentleHugeFloat 8s ease-in-out infinite;
}


/* Inhalt über die Grafik */
.section-animation-red .section_wrapper {
    position: relative !important;
    z-index: 1 !important;
}

.section-animation-red .column_heading,
.section-animation-red .column_button {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    margin-left: 0 !important;
}


/* Mobile */
@media (max-width: 767px) {

    .section-animation-red::after {
        width: 1100px;
        top: 250px;
    }

}


/* Animation */
@keyframes gentleHugeFloat {

    0% {
        transform: translateX(-50%)
                   translateY(0)
                   rotate(0deg);
    }

    50% {
        transform: translateX(-50%)
                   translateY(-20px)
                   rotate(1.5deg);
    }

    100% {
        transform: translateX(-50%)
                   translateY(0)
                   rotate(0deg);
    }

}

/* Momente Slider */

.section-fullwidth .section_wrapper {
	padding-left: 0!important;
	padding-right: 0!important;
	max-width: 100% !important;
}

.section-fullwidth .mcb-column-inner {
	margin-left: 0!important;
	margin-right: 0!important;
}

.slider_pagination a.selected, .slider_pagination .slick-active a {
	display: inline-block!important;
	width: 12px!important;
  height: 12px!important;
  text-indent: -9999px!important;
  margin: 4px 8px!important;
  background: #65022E!important;
  -webkit-border-radius: 100%!important;
  border-radius: 100%!important;
  position: relative!important;
  cursor: pointer!important;
	top: 0!important;
}

.slider_pagination a.selected:after, .slider_pagination .slick-active a:after {
	display: none;
}

/* ==========================================================================
   1. SLICK SLIDER GLOBAL & VERTIKALE ZENTRIERUNG
   ========================================================================== */

/* Vertikale Zentrierung der Slides zueinander */
.feedback-slider .slick-track {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}

.feedback-slider .slick-slide {
    height: auto !important;
    float: none !important;
}

.feedback-slider .slick-list {
    height: auto !important;
}

/* Navigationspfeile */
.feedback-slider .content_slider .slider_prev {
    left: -150px;
}

.feedback-slider .content_slider .slider_next {
    right: -150px;
}

/* ==========================================================================
   2. STANDARD-SLIDES (Grid Layout für Hochformat)
   ========================================================================== */

.feedback-slider .content_slider_li {
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 0 50px !important; 
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
}

.feedback-slider .content_slider_li > img {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    margin: 0 !important;
}

.feedback-slider .content_slider_li .title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

.feedback-slider .content_slider_li .desc {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    align-self: start !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #515e68 !important;
}

/* ==========================================================================
   3. SLIDE 3 (Querformat-Sonderlayout mit "Mehr lesen")
   ========================================================================== */
.feedback-slider .content_slider_li_3 {
    display: block !important;
    width: 100% !important;
		padding-bottom: 20px;
}

/* Querformat-Bild oben */
.feedback-slider .content_slider_li_3 img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    margin: 0 0 15px 0 !important;
    float: none !important;
}

/* Volle Breite für Textbereiche */
.feedback-slider .content_slider_li_3 .title,
.feedback-slider .content_slider_li_3 .desc {
    width: 100% !important;
    display: block !important;
    float: none !important;
}

/* Einklappbarer Textbereich */
.feedback-slider .content_slider_li_3 .desc {
    position: relative;
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    margin-bottom: 5px !important;
}

/* Sanfter Ausblend-Verlauf */
.feedback-slider .content_slider_li_3 .desc::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Ausgeklappter Zustand */
.feedback-slider .content_slider_li_3 .desc.expanded {
    max-height: 2000px !important;
}

.feedback-slider .content_slider_li_3 .desc.expanded::after {
    opacity: 0;
}

/* "Mehr lesen" Button */
.read-more-btn-3 {
    display: inline-block !important;
    margin-top: 8px !important;
    color: #333;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    text-decoration: underline;
}

/* Formular */

	.custom-cf7-form {
	  width: 100%;
	  max-width: 650px;
	}

	.custom-cf7-form .form-row.two-cols {
	  display: flex;
	  gap: 16px;
	}

	.custom-cf7-form .form-col {
	  flex: 1;
	}

	.custom-cf7-form input[type="text"],
	.custom-cf7-form input[type="tel"],
	.custom-cf7-form input[type="email"],
	.custom-cf7-form textarea {
	  width: 100% !important;
	  box-sizing: border-box !important;
	  background-color: transparent !important;
	  border: 1px solid #7a8b99 !important;
	  border-radius: 12px !important;
	  padding: 14px 18px !important;
	  font-size: 15px !important;
	  color: #515e68 !important;
	  outline: none !important;
	  box-shadow: none !important;
	  margin: 0 !important;
	}

	.custom-cf7-form textarea {
	  height: 120px !important;
	  resize: vertical;
	}

	.custom-cf7-form input::placeholder,
	.custom-cf7-form textarea::placeholder {
	  color: #515e68 !important;
	  opacity: .75;
	}


		@media (max-width: 600px) {
		  .custom-cf7-form .form-row.two-cols {
			flex-direction: column;
			gap: 16px;
		  }
		}

	/* Stellt sicher, dass das Popup von Magnific Popup richtig eingeblendet wird */
.mfp-content #cf7-video-lightbox {
    display: block !important;
}

/* Versteckt den Container nur, solange er AUSSERHALB der Lightbox liegt */
div#cf7-video-lightbox.mfp-hide {
    display: none !important;
}

/* Instagram */

.sbi_follow_btn a {
	transition-duration: .3s!important;
  transition-property: transform!important;
	transition-timing-function: ease-out!important;
	box-shadow: var(--mfn-button-box-shadow)!important;
	display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: var(--mfn-button-gap)!important;
    position: relative!important;
    box-sizing: border-box!important;
    font-family: var(--mfn-button-font-family)!important;
    font-size: var(--mfn-button-font-size)!important;
    font-weight: var(--mfn-button-font-weight)!important;
    font-style: var(--mfn-button-font-style)!important;
    letter-spacing: var(--mfn-button-letter-spacing)!important;
    line-height: 1.2!important;
    padding: var(--mfn-button-padding)!important;
    border-width: var(--mfn-button-border-width)!important;
    border-style: var(--mfn-button-border-style)!important;
    border-radius: var(--mfn-button-border-radius)!important;
    outline: unset!important;
    text-decoration: none!important;
    cursor: pointer!important;
    overflow: hidden!important;
		border-color: #65002e!important;
    color: #65002e!important;
    border-width: 1px!important;
    font-size: 15px!important;
}

#sb_instagram .sbi_follow_btn a {
	background-color: transparent!important;
}

#sb_instagram .sbi_follow_btn a:hover {
	    background-color: #65002e!important;
    background-image: #65002e!important;
    border-color: transparent!important;
    color: #ffc2e5!important;
}

#Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span {
	color: #515E68!important;
}

#Top_bar.is-sticky .action_button {
	border-color: #65022E;
  color: #65022E;
}

#Top_bar.is-sticky .action_button:hover {
  background-color: #65022E;
	color: #ffc2e5;
}

/* RWD */

@media only screen and (max-width: 500px) {
	#Top_bar .container {
		padding-left: 20px!important;
		padding-right: 20px!important;
	}
	
	.mobile-header-mini #Top_bar a.responsive-menu-toggle {
		right: 30px !important;
	}
	
	.section_wrapper {
		padding-left: 30px !important;
    padding-right: 30px !important;
	}
	
	h2 {
		font-size: 28px;
		line-height: 1.2;
	}
	
	.section-animation-red h2 {
		font-size: 20px;
	}
	
	.custom-cf7-form .form-row.two-cols {
		gap: 0;
	}

	#sb_instagram .svg-inline--fa.fa-instagram {
		display: none!important;
	}
}

@media only screen and (min-width: 501px) and (max-width: 767px) {
	#Top_bar .container {
		padding-left: 50px !important;
    padding-right: 50px !important;
    max-width: 100vw !important;
    padding-top: 15px !important;
	}
	
	.mobile-header-mini #Top_bar a.responsive-menu-toggle {
  	right: 60px !important;
	}
	
	.section_wrapper {
		padding-left: 50px!important;
    padding-right: 50px!important;
	}
}

@media only screen and (max-width: 700px) {
	.icon-shadow {
		left: -5%!important;
	}
	
	.icon-shadow .image_frame {
		width: 120px!important;
	}
}

@media (max-width: 767px) {
	
	#Top_bar.is-sticky .responsive-menu-toggle {
		color: #65002e;
	}
	
	#Top_bar .container {
    max-width: 100vw !important;
    padding-top: 15px !important;
	}
	
	.mobile-header-mini #Top_bar a.responsive-menu-toggle {
		top: 45px!important;
	}
	
	#Top_bar.is-sticky {
		background-color: white!important;
		box-shadow: 2px 2px 10px rgba(81,94,104, 3)!important;
		padding: 10px;
		opacity: 1!important;
	}
	
	#Top_bar.is-sticky .container {
		padding-top: 0!important;
	}
	
	.feedback-slider .content_slider_li {
		grid-template-columns: 1fr !important;
		gap: 20px 0 !important;
	}

	.feedback-slider .content_slider_li > img {
		grid-column: 1 !important;
		grid-row: 1 !important;
		aspect-ratio: 1 / 1 !important;
	}

	.feedback-slider .content_slider_li .title {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}

	.feedback-slider .content_slider_li .desc {
		grid-column: 1 !important;
		grid-row: 3 !important;
	}
	
	.feedback-slider .button.the-icon {
		display: none!important;
	}
	
	/*.momente-slider .slider_pager.slider_pagination {
			display: inline-block!important;
	}*/ 
	
	.feedback-slider .slider_pager.slider_pagination {
		display: inline-block!important;
	}
	
	/*.mobile-tr-header.ab-hide #Top_bar {
		top: 30px;
	}*/
	
	/*.content_slider.center a.button {
		display: inline-block!important;
	}*/
	
	.section-animation-red .column_image {
		width: 910px!important;
		top: -85%!important;
		left: -30%!important;
		animation: none!important;
	}
	
	.icon-shadow .image_frame {
		width: 120px!important;
	}
	
	.feedback-slider .slick-track {
		align-items: flex-start!important;
	}
}

@media only screen and (min-width: 768px) {
	.rwd-center-image {
			margin-left: calc((100vw - 100%) / -1.7);
      width: calc(100% + (100vw - 100%) / 2) !important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	/*h1 {
		font-size: 45px;
		line-height: 1.2;
	}
	
	.subheadline-h1 p {
		font-size: 25px;
		line-height: 1.2;
	}*/
	
	.section_wrapper {
		padding-left: 80px;
    padding-right: 80px;
		max-width: 100vw;
	}
}

@media only screen and (min-width: 951px) {
	#Top_bar {
		padding-top: 50px;
	}
	
	#Top_bar.is-sticky {
		padding-top: 0px;
		background-color: white!important;
		box-shadow: 2px 2px 10px rgba(81,94,104, 3)!important;
	}
}

@media only screen and (max-width: 960px) {
	h1 {
		color: #FFC2E5!important;
	}

	.subheadline-h1 p {
		color: white;
	}

	h2 {
		font-family: "Loxe-Doumbar-Medium";
	}

	.first-h2 h2 {
		font-family: "Loxe-Doumbar-Medium";
	}

	.legal-heading h1 {
		color: #65002E!important;
	}

	.font-grey ol li {
		color: #515E68!important;
	}
	
	button, input[type=button],
	input[type=reset],
	input[type=submit],
	.button,
	.woocommerce a.added_to_cart,
	.wc-block-components-button:not(.is-link),
	.wp-block-button__link {
		font-size: 15px;
	}
	
	.feedback-slider .content_slider_li {
		display: flex!important;
		flex-direction: column;
	}
	
	.feedback-slider .content_slider_li .title {
		align-self: start!important;
		padding-top: 20px;
	}
}


@media (min-width: 961px) {
	h1 {
		color: #FFC2E5!important;
		font-size: 40px;
		line-height: 1;
	}

	.subheadline-h1 p {
		color: white;
		font-size: 24px;
    line-height: 1.2;
	}

	h2 {
		font-family: "Loxe-Doumbar-Medium";
	}

	.first-h2 h2 {
		font-family: "Loxe-Doumbar-Medium";
		font-size: 45px;
    line-height: 1;
	}

	.legal-heading h1 {
		color: #65002E!important;
	}

	.font-grey ol li {
		color: #515E68!important;
	}
}

@media only screen and (min-width: 960px) and (max-width: 1024px) {
	.custom-rwd .tablet-one-second,
	.custom-rwd .laptop-one-third.mcb-wrap {
		width: 50%;
	}
	
	.custom-rwd .tablet-one,
	.custom-rwd .mcb-wrap-xxmnnw2 {
		width: 100%;
	}
	
	.custom-rwd .mcb-column-inner-mjwgckxm.mcb-item-image-inner {
		margin-right: 0!important;
		margin-bottom: 50px!important;
	}
	
	.custom-rwd.rwd-3-spaltig .laptop-one-third.mcb-wrap {
		width: 100%;
	}
}

@media only screen and (min-width: 1025px) {
		
	/*.momente-slider {
		clip-path: inset(0 0 0 20%);
		margin-right: calc((100vw - 100%) / -2);
		width: calc(100% + (100vw - 100%) / 2)!important;
	}
	
	.momente-slider a.button.the-icon.slider_prev {
		position: absolute;
		left: 250px;
	}

	.momente-slider a.button.the-icon.slider_next {
		position: absolute;
		left: unset;
		right: 240px;
	}*/
}

@media only screen and (min-width: 1240px) {
	#Top_bar.is-sticky {
		padding-top: 0px;
		background-color: white!important;
		box-shadow: 2px 2px 10px rgba(81,94,104, 3)!important;
	}
			
	#Top_bar.is-sticky .container {
		max-width: 1340px;
	}
			
	#Top_bar.is-sticky .container .logo {
		margin-left: 0;
	}

}

@media only screen and (min-width: 1440px) {
   /* #Wrapper,.with_aside .content_wrapper {
        max-width:1360px!important;
    }

    body.layout-boxed.mfn-header-scrolled .mfn-header-tmpl.mfn-sticky-layout-width {
        max-width: 1360px!important;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

    body.layout-boxed:not(.mfn-header-scrolled) .mfn-header-tmpl.mfn-header-layout-width,body.layout-boxed .mfn-header-tmpl.mfn-header-layout-width:not(.mfn-hasSticky) {
        max-width: 1360px!important;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

    body.layout-boxed.mfn-bebuilder-header.mfn-ui .mfn-only-sample-content {
        max-width: 1360px!important;
        margin-left: auto;
        margin-right: auto
    }

    .section_wrapper,
	.container {
        max-width: 1340px!important;
    }

    .layout-boxed.header-boxed #Top_bar.is-sticky {
        max-width: 1360px!important;
    }*/
	
		.rwd-center-image {
				margin-left: calc((100vw - 100%) / -2);
				width: calc(100% + (100vw - 100%) / 2)!important;
		}
}



@media only screen and (min-width: 1240px) and (max-width: 1360px) {
	.section_wrapper, .container {
	    max-width: 1220px!important;
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1440px) {
    .section_wrapper {
        padding-left: 120px;
        padding-right: 120px;
				max-width: 100vw;
    }
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .section_wrapper {
        padding-left: 100px;
        padding-right: 100px;
				max-width: 100vw;
    }
}


@media only screen and (max-width: 500px) {
	.icon-shadow .image_frame {
		width: 100px!important;
	}
	
	.icon-shadow {
        left: -8% !important;
    }
}

@media only screen and (max-width: 375px) {
	.icon-shadow .image_frame {
		width: 80px!important;
	}
	
	.icon-shadow {
		left: -8% !important;
	}
}