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

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

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

/* Section BG Transition "über mich" */

/* 1) Ziel: Divi Sektion mit Klasse bg-transition */
.et_pb_section.bg-transition {
  position: relative !important; /* sicherstellen, dass Position relativ ist */
  overflow: hidden !important;
  /* normales Hintergrundbild via Divi, bleibt bestehen */
}

/* 2) Pseudo-Element oben drauf: Hover-Bild */
.et_pb_section.bg-transition::after {
  content: "";
  position: absolute;
  inset: 0; top:0; right:0; bottom:0; left:0; 
  background-image: url("https://tierheilpraxis-pan.ch/wp-content/uploads/2025/12/familie-benedetti.webp"); /* <--- anpassen */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1000ms ease;
  z-index: 1;            /* liegt über dem Sektion-Hintergrund */
  pointer-events: none;  /* erlaubt Klicks auf darunterliegende Elemente */
}

/* 3) Inhalt der Sektion soll oben bleiben (Buttons/Text klickbar)
.et_pb_section.bg-transition .et_pb_row,
.et_pb_section.bg-transition .et_pb_module,
.et_pb_section.bg-transition .et_pb_column {
  position: relative;
  z-index: 2; /* höher als ::after
}*/

/* 4) Hover-Effekt (nur auf Geräten mit Hover) */
@media (hover: hover) and (pointer: fine) {
  .et_pb_section.bg-transition:hover::after {
    opacity: 1;
  }
}


/* Image inner border */
.ad-inner-border .et_pb_image_wrap,
.ad-inner-border .et_pb_main_blurb_image {
	position: relative;
}

.ad-inner-border .et_pb_main_blurb_image:before {
	content: '';
    top: 0px;
    left:0px;
	width: 100%;
	height: 100%;
    background-color: rgb(0 0 0 / 17%);
    position: absolute;
    z-index: 1;
	transition: all .3s ease;
}

.ad-inner-border .et_pb_main_blurb_image:hover:before {
    background-color: rgb(0 0 0 / 0%);
}

.ad-inner-border .et_pb_image_wrap:before {
    content: '';
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    position: absolute;
    z-index: 1;
}

.ad-inner-border .et_pb_image_wrap:after {
    content: '';
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    position: absolute;
    z-index: 1;
}

/* Inner border section */

.ad-inner-border-section:before {
    content: '';
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    position: absolute;
    z-index: 1;
}

.ad-inner-border-section:after {
    content: '';
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    position: absolute;
    z-index: 1;
}

/* Inner border row */

.ad-inner-border-row:before {
    content: '';
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    position: absolute;
    z-index: 1;
}

.ad-inner-border-row:after {
    content: '';
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    position: absolute;
    z-index: 1;
	visibility: visible !important;
    height: auto !important;
    width: auto !important;
}

/* Inner border color blurb image */

.ad-inner-border .et_pb_image_wrap:before {
    border-top: 1px solid #fff; /* top border color */
    border-bottom: 1px solid #fff; /* bottom border color */
}

.ad-inner-border .et_pb_image_wrap:after {
    border-right: 1px solid #fff; /* right border color */
    border-left: 1px solid #fff; /* left border color */
}

/* Inner border color section */

.ad-inner-border-section:before {
    border-top: 1px solid #f4f1ec; /* top border color */
    border-bottom: 1px solid #f4f1ec; /* bottom border color */
}

.ad-inner-border-section:after {
    border-right: 1px solid #f4f1ec; /* right border color */
    border-left: 1px solid #f4f1ec; /* left border color */
}

/* Inner border color row */

.ad-inner-border-row:before {
    border-top: 1px solid #c19c7b; /* top border color */
    border-bottom: 1px solid #c19c7b; /* bottom border color */
}

.ad-inner-border-row:after {
    border-right: 1px solid #c19c7b; /* right border color */
    border-left: 1px solid #c19c7b; /* left border color */
}