/*
 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
------------------------------------------------------- */

/******* Blumen Divider *********/
hr.ad-divider { 
    background: url('https://jetzt-ist-leben.ch/wp-content/uploads/2026/04/blume-olive.webp') no-repeat top center;
    background-size: contain;
    display: block;
    height: 40px;
    border: 0;
    position: relative;
}
hr.ad-divider:before,
hr.ad-divider:after {
    content: '';
    display: block;
    position: absolute;
    background: #2c8b92;
    height: 1px;
    top: 20px;
}
hr.ad-divider:before {
    left: 0;
    right: 50%;
    margin-right: 50px;
}
hr.ad-divider:after {
    right: 0;
    left: 50%;
    margin-left: 50px;
}

/* Mobile */
@media only screen and (max-width: 980px) {
  hr.ad-divider { 
    background: url('https://jetzt-ist-leben.ch/wp-content/uploads/2026/04/blume-olive.webp') no-repeat top center;
    background-size: contain;
    display: block;
    height: 30px;
    border: 0;
    position: relative;
}
hr.ad-divider:before,
hr.ad-divider:after {
    content: '';
    display: block;
    position: absolute;
    background: #2c8b92;
    height: 1px;
    top: 15px;
}
hr.ad-divider:before {
    left: 0;
    right: 50%;
    margin-right: 40px;
}
hr.ad-divider:after {
    right: 0;
    left: 50%;
    margin-left: 40px;
}
}


/*** Menu Underscore ***/
/* The Initial State */
.ad-menu ul.et-menu > li > a:before {
    content: '';
    width: 0;
    left: 50%;
    height: 2px;
    border-radius: 3px;
    background: #c0a089;
    position: absolute;
    z-index: -1;
    bottom: 0px;
    opacity: 0;
}

/* The Hover State */
.ad-menu ul.et-menu > li > a:hover:before {
    width: 50%;
    left: 25%;
    opacity: 1;
}

/* Offenes Hamburger-Menu mit "X" ersetzen */
.mobile_menu_bar::before {
    display: block;
    transition: all .4s ease;
}
.mobile_nav.opened .mobile_menu_bar::before {
    content: "M";
    transform: rotate(90deg);
}

/* Center Menu Items on Mobile */
.et_mobile_menu li a {
    text-align: center !important;
}

/* Hyphens */
.ad-h1 {
	hyphens:auto;
}

/*-------Horizontales Scrollen auf dem Smartphone unterbinden-------*/

#page-container {
    overflow-x: hidden;
}

/* Footer Section Divider animieren */
.ad-animate-bottom .et_pb_bottom_inside_divider {
-webkit-animation: scroll 150s linear infinite;
animation: scroll 150s linear infinite;
}
.ad-animate-top .et_pb_top_inside_divider {
-webkit-animation: scroll 150s linear infinite;
animation: scroll 150s linear infinite;
}

/* Mobile Animation */
@media only screen and (max-width: 980px) {
	
	.ad-animate-bottom .et_pb_bottom_inside_divider {
		-webkit-animation: scroll 300s linear infinite;
		animation: scroll 300s linear infinite;
	}
	
	.ad-animate-top .et_pb_top_inside_divider {
		-webkit-animation: scroll 300s linear infinite;
		animation: scroll 300s linear infinite;
	}
}

@keyframes scroll {
100%{
	background-position: 10000px center;
}
}

/* Weisse Linien über Bild */
@media (min-width: 981px) {
  
  .hero-image-lines {
    position: relative;
    overflow: visible !important;
  }

  .hero-image-lines::before,
  .hero-image-lines::after {
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    pointer-events: none;
  }

  /* Vertikale Linie - Fixiert auf die linke Kante */
  .hero-image-lines::before {
    width: 1px;
    top: 50%;       /* Startet immer bei 5% der Bildhöhe */
    bottom: 5%;  /* Ragte immer um 10% der Bildhöhe nach unten raus */
    left: -3%;       
  }

  /* Horizontale Linie - Die Kreuzung */
  .hero-image-lines::after {
    height: 1px;
    /* Nutze Prozent für die horizontale Ausdehnung */
    left: -3%;    /* Ragte immer proportional nach links in die Nachbarspalte */
    right: 50%;    /* Endet bei 70% der Bildbreite */
    
    /* Der entscheidende Punkt für die Kreuzung: */
    /* bottom: 0; würde genau auf der Unterkante liegen. */
    /* Wir setzen sie ein Stück weit hoch: */
    bottom: 5%;   
  }
}

html.fouc-fix body {
    opacity: 0;
}