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


html, body {
    scroll-behavior: smooth !important;
}

.hyphens {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

h3 {
  -webkit-hyphens: auto; /* Für Safari / ältere WebKit-Browser */
  -ms-hyphens: auto;     /* Für ältere Edge/IE-Versionen */
  hyphens: auto;
  
  /* Optional: Verhindert das Überlappen sehr langer Wörter, falls keine Silbentrennung möglich ist */
  overflow-wrap: break-word; 
}


/*#######################################################################################*/
.zoom-container {
    will-change: transform;
    transition: transform 0.3s ease; /* Sanfte Übergangsanimation */
    display: inline-block; /* Kann angepasst werden je nach Layout */
}

.zoom-container:hover {
    transform: scale(1.03); /* Vergrößert den Container um 2% */
}

.zoom-container-big {
  will-change: transform;
  transition: transform 0.3s ease; /* Sanfte Übergangsanimation */
  display: inline-block; /* Kann angepasst werden je nach Layout */
}

.zoom-container-big:hover {
  transform: scale(1.1); /* Vergrößert den Container um 2% */
}
/*#######################################################################################*/



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

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




/*#######################################################################################*/
/* Kartenanhebeeffekt für Beitragskarussel*/

.wp-block-kadence-postgrid.card-up-grid .kadence-post-image {
    position: relative; /* Wichtig für z-index */
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    z-index: 10;
    overflow: hidden; /* Verhindert, dass das Bild über den Container hinausragt */
  }
  
  .wp-block-kadence-postgrid.card-up-grid .kadence-post-image-inner-intrisic img {
    width: 100%; /* Sicherstellen, dass das Bild die volle Breite des Containers hat */ 
    will-change: transform; 
    transition: transform 0.3s ease-in-out;
  }
  
 
  .wp-block-kadence-postgrid.card-up-grid .kadence-post-image:hover {
    transform: translateY(-13%);
  }
  

  .wp-block-kadence-postgrid.card-up-grid .kt-blocks-post-grid-item-inner {
    position: relative;
    top: -60px;
    z-index: 5;
    will-change: transform;
    transition: transform 0.4s ease-in-out;
  }
  
  .wp-block-kadence-postgrid.card-up-grid .kadence-post-image:hover + .kt-blocks-post-grid-item-inner {
    will-change: transform;
    transform: scale(1.05);
    transition: transform 0.4s ease-in-out;
  }
  
  
/*#######################################################################################*/


/*#######################################################################################*/
.wp-block-kadence-postgrid.card-zoom-in .kadence-post-image {
    will-change: transform;
    position: relative;
    transition: transform 0.4s ease-in-out;
  }
  
  .wp-block-kadence-postgrid.card-zoom-in .kadence-post-image .kadence-post-image-inner-intrisic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.10); /* Dunkler Schimmer */
    opacity: 1; /* Standardmäßig sichtbar */
    will-change: transform;
    transition: opacity 0.4s ease-in-out; /* Gleiche Animationszeit wie der Hover-Effekt */
    z-index: 1;
    pointer-events: none; /* Ermöglicht Klicks auf das Bild darunter */
  }
  
  .wp-block-kadence-postgrid.card-zoom-in .kadence-post-image:hover .kadence-post-image-inner-intrisic::before {
    opacity: 0; /* Schimmer wird unsichtbar beim Hover */
  }
  
  .wp-block-kadence-postgrid.card-zoom-in .kadence-post-image:hover .kadence-post-image-inner-intrisic img {
    will-change: transform;
    transform: scale(1.05);
    transition: transform 0.4s ease-in-out;
  }
  
  .wp-block-kadence-postgrid.card-zoom-in .kadence-post-image .kadence-post-image-inner-intrisic img {
    will-change: transform;
    transition: transform 0.4s ease-in-out;
  }
  
  
/*#######################################################################################*/
/*#######################################################################################*/
/* Kartenanhebeeffekt (.card-up-section) – Stehender Text & aufsteigendes Bild */
/*#######################################################################################*/

/* 1. Grundstruktur der Spalte */
.card-up-section {
    position: relative;
    overflow: hidden; /* Schnappt das Bild oben ab, wenn es hochfährt */
    border-radius: 0px;
    will-change: transform;
}

/* 2. Bild-Container (liegt im z-index ÜBER dem Text) */
.card-up-section .wp-block-kadence-image {
    position: relative;
    z-index: 10;
    will-change: transform;
    transition: transform 0.4s ease-in-out;
}

.card-up-section .kb-img {
    width: 100%;
    display: block;
    will-change: transform;
    transition: transform 0.4s ease-in-out;
}

/* 3. Text-Bereich: Bleibt statisch an Ort und Stelle und skaliert nur leicht */
.card-up-section .wp-block-kadence-advancedheading {
    position: relative;
    z-index: 5; /* Liegt unter dem Bild */
    
    /* Zieht den Text unter das Bild, damit er im Normalzustand verdeckt ist */
    margin-top: -100px; /* Ggf. an die Bildhöhe anpassen */
    
    background: #ffffff; 
    padding: 25px;
    border-radius: 0px;
    box-shadow: none;
    
    will-change: transform;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

/* 4. HOVER-EFFEKT */
/* Nur das Bild fährt nach oben und zoomt dezent */
.card-up-section:hover .wp-block-kadence-image {
    transform: translateY(-18%); /* Passt an, wie weit das Bild hochrollen soll */
}

.card-up-section:hover .kb-img {
    transform: scale(1.03);
}

/* Der Text bleibt stehen und wird nur leicht größer (skaliert) */
.card-up-section:hover .wp-block-kadence-advancedheading {
    transform: scale(1.02); /* Leichtes Vergrößern beim Hover */
    box-shadow: none;
}
/*#######################################################################################*/

.wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single {

    margin-right: 10px;
    padding: 0px 0;
  padding-top: 2px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;

}

/*#######################################################################################*/
.site-header-item {
  display: flex;
  align-items: start !important;
  margin-right: 10px;
  max-height: inherit;
  padding-top: 0px !important;
}

@media (max-width: 1024px) { /* Tablets und kleiner */
  .site-header-item {
      padding-top: 15px !important;
  }
}
/*#######################################################################################*/


/*#######################################################################################*/
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: var(--global-palette8);
    font-weight: 900;
}

/*macht Logo bündig zum oberen Websiterand */
.site-branding {
    margin-top: -10px;
}


.main-navigation {
  position: relative; /* Needed for positioning the pseudo-element */
}


.mobile-menu-container .current-menu-item > a {
    text-decoration: underline; 
}


.mobile-menu-container .current-menu-item > .drawer-nav-drop-wrap > a {
    text-decoration: underline;
}
/*#######################################################################################*/






/*#######################################################################################*/
/* Basis-Styles für alle Buttons */
.arrow-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    padding: 15px 25px;
    min-width: 120px;
    min-height: 50px;
    text-align: left;
    overflow: hidden;
    gap: 15px;
    will-change: transform;
}

/* SVG-Pfeil als Icon (Farbe und Größe angepasst) */
.arrow-button::after {
    content: '';
    display: inline-block;
    width: 36px; /* Etwas größer gemacht (vorher 28px) */
    height: 36px;
	margin-top: -5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Cpath d='M482,234.839l-116.5-67.261c-4.783-2.761-10.898-1.122-13.66,3.66c-2.762,4.783-1.122,10.898,3.66,13.66l84.213,48.62H10c-5.523,0-10,4.478-10,10c0,5.521,4.477,10,10,10h429.646L355.5,302.101c-4.783,2.762-6.422,8.877-3.66,13.66c1.853,3.208,5.213,5.002,8.669,5.002c1.696,0,3.416-0.434,4.991-1.342L482,252.159c3.094-1.786,5-5.088,5-8.66C487,239.927,485.094,236.625,482,234.839z' fill='%23007ABD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
    will-change: transform;
    flex-shrink: 0;
}

/* Hover-Effekt: Pfeil sanft nach rechts bewegen */
.arrow-button:hover::after {
    transform: translateX(8px); /* Bei größerem Icon den Hover-Weg minimal angepasst */
}
/*#######################################################################################*/
.next.page-numbers {
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 0; 
    color: transparent;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Cpath d='M482,234.839l-116.5-67.261c-4.783-2.761-10.898-1.122-13.66,3.66c-2.762,4.783-1.122,10.898,3.66,13.66l84.213,48.62H10c-5.523,0-10,4.478-10,10c0,5.521,4.477,10,10,10h429.646L355.5,302.101c-4.783,2.762-6.422,8.877-3.66,13.66c1.853,3.208,5.213,5.002,8.669,5.002c1.696,0,3.416-0.434,4.991-1.342L482,252.159c3.094-1.786,5-5.088,5-8.66C487,239.927,485.094,236.625,482,234.839z' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
    
   
    position: relative;
    top: 8px;
}

.next.page-numbers svg {
    display: none;
}

.prev.page-numbers {
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 0; 
    color: transparent;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487 487'%3E%3Cpath d='M5,252.161l116.5,67.261c4.783,2.761,10.898,1.122,13.66-3.66c2.762-4.783,1.122-10.898-3.66-13.66L58.387,253.44h427.613c5.523,0,10-4.478,10-10c0-5.521-4.477-10-10-10H56.354l74.946-43.261c4.783-2.762,6.422-8.877,3.66-13.66c-1.853-3.208-5.213-5.002-8.669-5.002c-1.696,0-3.416,0.434-4.991,1.342L5,234.841c-3.094,1.786-5,5.088-5,8.66C0,247.073,1.906,250.375,5,252.161z' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
    
    position: relative;
    top: 8px;
}

.prev.page-numbers svg {
    display: none;
}




/* Kadence Button: Icon-Ausrichtung und Transition für alle Zustände */
.wp-block-kadence-advancedbtn a.kb-button svg {
    margin-top: -5px;
    transition: transform 0.3s ease, fill 0.3s ease;
    will-change: transform;
}

/* Hover-Effekt: Nur Verschiebung und neue Farbe */
.wp-block-kadence-advancedbtn a.kb-button:hover svg {
    transform: translateX(8px);
    
}






/*#######################################################################################*/
/*parallax blury wide screen header carousel */
  
.blur-background {
  position: relative;
  overflow: hidden;
}

@media (min-width: 2250px) {
  .blur-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: blur(30px); /* Adjust the blur value as needed */
    z-index: -1; /* Ensure the blur effect stays behind the content */
  }

  .blur-background > * {
    filter: blur(25px) brightness(1.3); /* Adjust blur and brightness */
  }
}


.limit-section {
  max-width: 2300px !important;
  width: 100%;
  margin: 0 auto; /* Centers the section horizontally */
}

.parallax-section {
  position: relative;
  overflow: hidden; /* Verhindert überstehende Inhalte */
}

.parallax-section > * {
  position: relative;
  will-change: transform;
}

/* Langsame Parallax-Effekte */
.parallax-section-slow {
  position: relative;
  overflow: hidden;
}

.parallax-section-slow > * {
  position: relative;
  will-change: transform;
}


  /* zoomin for carousel!!!! */
  @keyframes zoomIn {
    0% {
      transform: scale(1); /* Initial state */

    }
    100% {
      transform: scale(1.06); /* 5% zoom-in */

    }
  }
/*#######################################################################################*/















/*👉➡ Definiere die Zoom-Animationen ⬅
@keyframes zoomIn {
    0% {
      transform: scale(1.0);
    }
    100% {
      transform: scale(1.03);
    }
  }
  
  @keyframes zoomOut {
    0% {
      transform: scale(1.03);
    }
    100% {
      transform: scale(1.0);
    }
  }
  
  ➡ Die Zoom-Section Klasse ⬅
  .zoom-section {
    display: inline-block;
    transform: scale(1.0); ➡ Initiale Skalierung ⬅
    animation-duration: 4.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; ➡ Behalte den Endzustand ⬅
    transition: none; ➡ Verhindere störende CSS-Übergänge ⬅
  }
  
  ➡ Zusätzliche Klassen zur Steuerung der Animation (falls benötigt) ⬅
  .zoom-section.zoom-in {
    animation-name: zoomIn;
  }
  
  .zoom-section.zoom-out {
    animation-name: zoomOut;
  }

  .limit-section {
    max-height: 80vh;       ➡ Maximale Höhe auf 80% der Viewport-Höhe für größere Bildschirme ⬅
    overflow: hidden;       ➡ Verhindert Überlauf, falls der Inhalt größer ist ⬅
    width: 100%;            ➡ Volle Breite der Sektion ⬅
    box-sizing: border-box; ➡ Stellt sicher, dass Padding und Border zur Gesamtgröße beitragen ⬅
    position: relative;     ➡ Positionierung für Animationen oder Layout ⬅
  }
  
  ➡ Für Tablets (maximale Breite 768px) ⬅
  @media (max-width: 768px) {
    .limit-section {
      max-height: 65vh;    ➡ Maximale Höhe auf 65% der Viewport-Höhe für Tablets ⬅
    }
  }
  
  ➡ Für Handys (maximale Breite 480px) ⬅
  @media (max-width: 480px) {
    .limit-section {
      max-height: 60vh;    ➡ Maximale Höhe auf 50% der Viewport-Höhe für Handys ⬅
    }
  }
  👈*/






/*blue menu line with hover effec*/
/* Allgemeine Menü-Items */

/*👉.menu-item {
    text-decoration: none; ➡ Entfernt die Standard-Unterstreichung ⬅
    position: relative;
}

.menu-item::after {
    content: '';
    position: absolute;
    bottom: 6px; ➡ Nähert die Linie an den Text an ⬅
    left: 0; ➡ Beginnt am linken Rand des Textes ⬅
    right: 0; ➡ Linie endet an der rechten Seite des Containers ⬅
    height: 8px; ➡ Dicke der Linie ⬅
    background-color: #007ABD; ➡ Farbe der Linie ⬅
    width: 100%; ➡ Anfangs 100%, aber sichtbar bei Hover ⬅
    transform-origin: right; ➡ Transformationsursprung auf der rechten Seite ⬅
    transform: scaleX(0); ➡ Anfangszustand: Linie ist nicht sichtbar ⬅
    transition: transform 0.1s ease; ➡ Übergangseffekt für das Zeichnen ⬅
}

.menu-item:hover::after {
    transform: scaleX(1); ➡ Linie wird von rechts nach links gezeichnet ⬅
    width: 88%; ➡ 12px weniger auf der rechten Seite ⬅
}

➡ Aktuelles Menü-Item (immer unterstrichen) ⬅
.current-menu-item {
    text-decoration: none; ➡ Entfernt die Standard-Unterstreichung ⬅
    position: relative;
}

.current-menu-item::after {
    content: '';
    position: absolute;
    bottom: 6px; ➡ Nähert die Linie an den Text an ⬅
    left: 0; ➡ Beginnt am linken Rand des Textes ⬅
    right: 12px; ➡ Endet 12px vor dem rechten Rand ⬅
    height: 8px; ➡ Dicke der Linie ⬅
    background-color: #007ABD; ➡ Farbe der Linie ⬅
    width: 88%; ➡ Immer 12px kürzer auf der rechten Seite ⬅
}

➡ Stelle sicher, dass die .current-menu-item Regel die allgemeine .menu-item Regel überschreibt ⬅
.menu-item.current-menu-item::after {
    width: 88% !important; ➡ Stelle sicher, dass die Linie immer da ist ⬅
    transform: scaleX(1) !important; ➡ Verhindere, dass die transform-Eigenschaft überschrieben wird ⬅
}

➡ Medienabfrage für mobile Geräte ⬅
@media (max-width: 768px) {
    ➡ Menü-Item ohne Unterstreichung im mobilen Modus ⬅
    .menu-item::after,
    .menu-item:hover::after,
    .current-menu-item::after {
        content: none; ➡ Entfernt die Linie im mobilen Modus ⬅
    }
}


@media (max-width: 560px) {
    .mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon {
        font-size: 40px;
        margin-top: 45px;
    }
}👈*/

/* Milchglas-Effekt: Hell und sehr dezent */
.milchglas-effekt {
    /* Ein sehr helles Blau/Grau mit minimaler Deckkraft */
    background: rgba(255, 255, 255, 0.05) !important;
    
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
 
}


/*nagelneuer zoom in*/
/*#######################################################################################*/
/* Kadence Nativ Zoom: GPU-beschleunigt, mit Fokuspunkt & absolut im Rahmen */
/*#######################################################################################*/

/*#######################################################################################*/
/* Vollautomatischer Kadence Zoom: Ruckelfrei, mit Fokuspunkt & absolut im Rahmen */
/*#######################################################################################*/

.custom-zoom-parallax {
    position: relative;
    overflow: hidden !important; /* Hält den Container auf Desktop perfekt im Zaum */
}

/* Das automatisch generierte Animations-Layer (wird vom JS befüllt) */
.custom-zoom-bg-layer {
    position: absolute;
    inset: -15px; /* Etwas Puffer, damit die Ränder beim Zoomen sauber bleiben */
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
    transform: scale(1);
}

/* Die butterweiche GPU-Animation startet */
.custom-zoom-parallax.is-zoomed .custom-zoom-bg-layer {
    animation: finalKadenceZoom 12s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Sichert ab, dass deine Kadence-Inhalte (Text, Boxen) im Vordergrund bleiben */
.custom-zoom-parallax > .kt-row-column-wrap {
    position: relative;
    z-index: 1;
}

@keyframes finalKadenceZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05); /* Dezenter 5% Zoom - sieht stark aus und bricht nie aus */
    }
}
/*#######################################################################################*/
/*#######################################################################################*/


.flipbook-currentPageHolder form {
    display: flex;
    top: 0;
    margin: 0 !important;
}

.flipbook-main-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    direction: ltr!important;
    scrollbar-color: rgba(130,130,130,.5) transparent;
    scrollbar-width: thin;
    background: white !important;
}

.flipbook-right-arrow {
    display: flex!important;
    align-items: center;
    justify-content: center;
    position: absolute!important;
    top: 50%!important;
    right: 0;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: 0;
	border-radius: 0px !important;
    background-clip: padding-box;
    background-color: #007abd !important;
}

.flipbook-left-arrow {
    display: flex!important;
    align-items: center;
    justify-content: center;
    position: absolute!important;
    top: 50%!important;
    right: 0;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: 0;
	border-radius: 0px !important;
    background-clip: padding-box;
    background-color: #007abd !important;
}

.flipbook-border {
    border: 0px solid rgba(128,128,128,.4) !important;
}