/*
Theme Name:     KadenceChild
Theme URI:      n/a
Template:       kadence
Author:         Pro Author
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Basisstil für den Link */
.link-with-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Pfeil als SVG-Hintergrund */
.link-with-arrow::after {
	color: var(--global-palette1);
    content: "➝";
	font-weight: bold;
    display: inline-block;
    width: 30px; /* Standardbreite */
    height: 20px; /* Standardhöhe */
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 10px; /* Weiter nach rechts */
    margin-top: -7px; /* Weiter nach unten */
    transition: transform 0.3s ease-out, width 0.3s ease-out;
}

/* Hover-Effekt */
.link-with-arrow:hover::after {
    transform: translateX(12px);
}

/* Grundstil für wp-block-separator */
.wp-block-separator {
    width: 100%; /* Volle Breite */
    height: 3px; /* Höhe des Trenners */
    background-color: #555; /* Farbe */
    opacity: 0; /* Unsichtbar zu Beginn */
    transform: scaleX(0); /* Start-Skalierung: Unsichtbar */
    transition: transform 2s ease-in-out, opacity 2s ease-in; /* Animation */
	border-top: 1px solid;
    margin-bottom: 0px !important;
}

.blueline{

	height: 2px !important;
}

/* Animation: Von links nach rechts */
.wp-block-separator.to-right {
    transform-origin: left; /* Startpunkt: Linker Rand */
}

/* Animation: Von rechts nach links */
.wp-block-separator.to-left {
    transform-origin: right; /* Startpunkt: Rechter Rand */
}

/* Sichtbarer Zustand */
.wp-block-separator.visible {
    opacity: 1; /* Sichtbar */
    transform: scaleX(1); /* Skalierung auf 100% */
}


.kb-advanced-slide {
    max-width: 2300px; /* Maximale Breite des Sliders */
    min-height: 85vh !important; /* Maximale Höhe des Sliders relativ zur Viewport-Höhe */
    width: 100% !important; /* Slider passt sich der Breite des Containers an */
    margin: 0 auto; /* Zentrieren bei kleineren Breiten */
    overflow: hidden; /* Zusätzlicher Schutz vor überlaufenden Inhalten */
    position: relative; /* Nützlich für eventuelle Kind-Elemente wie Pfeile oder Indikatoren */
}

/* Tablets (bis 1024px Breite) */
@media (max-width: 1024px) {
    .kb-advanced-slide {
        max-width: 100%; /* Breite passt sich vollständig an den Viewport an */
        min-height: 60vh !important; /* Mindesthöhe wird reduziert */
    }
}

/* Smartphones (bis 768px Breite) */
@media (max-width: 768px) {
    .kb-advanced-slide {
        max-width: 100%; /* Breite bleibt bei 100% */
        min-height: 50vh !important; /* Höhe weiter reduziert */
    }
}

/* Sehr kleine Geräte (bis 480px Breite) */
@media (max-width: 480px) {
    .kb-advanced-slide {
        max-width: 100%; /* Breite bleibt bei 100% */
        min-height: 40vh !important; /* Höhe für sehr kleine Geräte */
    }
}

/*flipbox style*/

.service-flipbox-back{
    background-color: #0067B9;
    color: white;
}

.goverlay {    
    background: black !important; 
    }


.kt-testimonial-content mark {
    display: block;
    text-align: right;
}



/*#######################################################################################*/
/* Ausgangszustand: Logo-Wrapper */
.site-branding {
  position: relative;
  display: inline-block;
  overflow: visible;
  width: auto;
  height: auto;
  transition: all 0.3s ease;
}

/* Rundes Bild */
.site-branding img {
  transition: transform 0.5s ease, opacity 0.5s ease;
  display: block;

  width: 120px;
  position: relative;
  z-index: 1;
}

/* Overlay: Sticky-Logo (zunächst unsichtbar) */
.site-branding::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50px;
  width: 250px;
  height: 70px;
  background-image: url('https://be.lisa-augustin.de/wp-content/uploads/2024/12/logo-befotomedia-sticky.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, top 0.5s ease;
  z-index: 2;
}

/* Sticky-Zustand: Original-Logo schrumpft und wandert nach links */
.site-branding.is-stuck-logo img {
  transform:  translateX(0px);
  opacity: 0;
}

/* Sticky-Zustand: Overlay wird sichtbar */
.site-branding.is-stuck-logo::after {
	 top: 0px;
     opacity: 1;
}

/*#######################################################################################*/



/*#######################################################################################*/
.kadence-blocks-gallery-item {
  overflow: hidden;
  position: relative;
}

.kadence-blocks-gallery-item img {
  will-change: transform, filter, opacity;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 1;
  filter: blur(0px);
  /* Standardmäßig unscharf */
  z-index: 1;
}

.kadence-blocks-gallery-item::before {
  content: "";
  position: absolute;
 // top: 2.5px;   /* an Gallerie ZWischenraum anpassen */
 // right: 2.5px;
 // bottom: 2.5px;
 // left: 2.5px;
  background-color: rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: 2; 
}

.kadence-blocks-gallery-item:hover img {
  transform: scale(1.05);
  opacity: 1;

}

.kadence-blocks-gallery-item:hover::before {
  opacity: 0;
}
/*#######################################################################################*/

.skew-card .kt-inside-inner-col {
  transition: transform 0.3s ease;
  will-change: transform, box-shadow;;
  transform-style: preserve-3d;
  transform: scale(1) perspective(300px) rotateX(0deg) rotateY(0deg);
}


/*#######################################################################################*/

.kt-testimonial-content strong a,
.kt-testimonial-content mark a {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: #005cbf;
  text-decoration: none;
  transition: color 0.3s ease;
}

.kt-testimonial-content strong a::after,
.kt-testimonial-content mark a::after {
  content: "   ➝";
padding-left: 5px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.kt-testimonial-content strong a:hover,
.kt-testimonial-content mark a:hover {
  color: #004799;
}

.kt-testimonial-content strong a:hover::after,
.kt-testimonial-content mark a:hover::after {
  transform: translateX(4px);
}

.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single {
    margin-right: 10px;
    padding: 10px 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}


/*parallax effekte*/

/* Parallax Section – kompakter Look */
.parallax-section {
   min-height: auto; /* statt fester Höhe */
  margin-block: 0;  /* oder 1–2vh */
  padding-block: 4vh; /* lieber innen etwas Luft */
  padding-inline: 1vw; /* weniger Innenabstand */
  overflow: hidden;
}

/* Columns Layout enger zusammenrücken */
.parallax-section .wp-block-columns {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem; /* war 3rem – enger */
  max-width: 1000px;
  margin: 0 auto;
}

/* Beide Spalten: weniger Abstand innen */
.parallax-left,
.parallax-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* war 2rem – kompakter */
  overflow: visible;
}

/* Bilder */
.parallax-left img,
.parallax-right img {
  width: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  transition: transform 0.2s ease-out;
  margin: 0; /* Gutenberg fügt oft Margin hinzu */
}


/* Mobile */
@media (max-width: 768px) {
  .parallax-section {
    min-height: auto;
    margin-block: 2vh;
    padding-inline: 0px;
	  
  }

  .parallax-section .wp-block-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .parallax-left img,
  .parallax-right img {
    transform: none !important;
  }
}

@media (max-width: 2200px) {
.projekt-wide > .kt-row-column-wrap {
    column-gap: var(--global-kb-gap-sm, 1rem);
    row-gap: var(--global-kb-gap-sm, 1rem);
    padding-top: var( --global-kb-row-default-top, var(--global-kb-spacing-sm, 1.5rem) );
    padding-bottom: var( --global-kb-row-default-bottom, var(--global-kb-spacing-sm, 1.5rem) );
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
	
	@media (max-width: 1100px) {
.projekt-wide > .kt-row-column-wrap {
    column-gap: var(--global-kb-gap-sm, 1rem);
    row-gap: var(--global-kb-gap-sm, 1rem);
    padding-top: var( --global-kb-row-default-top, var(--global-kb-spacing-sm, 1.5rem) );
    padding-bottom: var( --global-kb-row-default-bottom, var(--global-kb-spacing-sm, 1.5rem) );
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
		
			@media (max-width: 736px) {
.projekt-wide > .kt-row-column-wrap {
    column-gap: var(--global-kb-gap-sm, 1rem);
    row-gap: var(--global-kb-gap-sm, 1rem);
    padding-top: var( --global-kb-row-default-top, var(--global-kb-spacing-sm, 1.5rem) );
    padding-bottom: var( --global-kb-row-default-bottom, var(--global-kb-spacing-sm, 1.5rem) );
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}

.ksp-preloader {
    display: none !important;
}

/* Einheitlicher Hover-Effekt für fixierte Kadence-Icon-Buttons */
.icon-hover .kb-svg-icon,
.icon-hover svg {
  display: inline-block;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

@media (hover: hover) {
  .icon-hover:hover .kb-svg-icon,
  .icon-hover:hover svg {
    transform: translateX(6px) scale(1.05);
  }
}


/* Basis für Prev / Next Buttons */
.gutslider-prev,
.gutslider-next {
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Pfeil / Icon im Button */
.gutslider-prev svg,
.gutslider-next svg {
  display: inline-block;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}

/* Hover-Effekt (Desktop only) */
@media (hover: hover) {
  .gutslider-prev:hover svg {
    transform: translateX(-6px) scale(1.05);
  }

  .gutslider-next:hover svg {
    transform: translateX(6px) scale(1.05);
  }
}


/*kreisgedöns*/
.portrait-img img{
  
  transition: filter .5s ease, transform .5s ease;
}

@media (hover:hover){
  .portrait-img:hover img{
    
    transform: scale(1.05);
  }
}


/*fix sidebar*/
@media (min-width: 768px){
/* 0) Der Wrap reserviert Platz (style="height: 152px") -> killen */
.kadence-pro-fixed-wrap{
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* 1) Fixed-Item wirklich unten fixieren (du hast footer-item) */
.kadence-pro-fixed-item.kadence-pro-fixed-footer-item{
  position: fixed !important;
  top: auto !important;
  bottom: 50px !important;
 
  z-index: 9999 !important;
}

/* 2) Nichts blockieren außer Buttons */
.kadence-pro-fixed-item{
  pointer-events: none;
}
.kadence-pro-fixed-item .kb-button,
.kadence-pro-fixed-item a.kb-button{
  pointer-events: auto;
}

/* 3) Buttons von unten nach oben */
.kadence-pro-fixed-item .kb-buttons-wrap{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}
}

/* To-Top standardmäßig verstecken */
.kadence-pro-fixed-item .to-top-btn{
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events: none; /* solange hidden */
}

/* Wenn sichtbar */
.kadence-pro-fixed-item .to-top-btn.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


/*flipbild*/
/* Flip-Kreis nur auf diesen Block */
.flip-advimg{
  width: 240px;           /* anpassen */
  aspect-ratio: 1 / 1;
  perspective: 1000px;
}

/* Der eigentliche “Körper” */
.flip-advimg figure{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .7s ease;
}

/* Hover = drehen */
.flip-advimg:hover figure{
  transform: rotateY(180deg);
}

/* Front: Bild */
.flip-advimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Back: Caption */
.flip-advimg figcaption{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  background: rgba(0,0,0,.75);
  color: #fff;
}

/* Optional: auf Touch-Geräten kein Hover-Flip */
@media (hover: none){
  .flip-advimg:hover figure{ transform: none; }
}