/* Style Kontaktformular */
.kontaktformular .elementor-field-textual {
    border-radius: 3px;
    font-size: 15px;
    line-height: 1.4;
    min-height: 40px;
    padding: 5px 5px;
}

.kontaktformular .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label {
font-size:16px;
}

/***************************** Menu Styles ****************************/

/* Unterstreichung beim Hover und aktiven Zustand für Elementor Navigationsmenü Links */
.elementor-nav-menu--main .elementor-item {
    position: relative;
    text-decoration: none;
}

.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
    transform: scaleX(0.8);
}

/***************************** Header Styles ****************************/

/* Initialer Zustand des Headers */
/* Initialer Zustand des Headers */
.elementor-header-shrink { /* Initialer Header-Stil */
    transition: padding 0.5s ease-in-out, opacity 0.5s ease-in-out, box-shadow 0.5s ease-in-out, border-top 0.5s ease-in-out; /* Transition auch für den Ausgangszustand */
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 3px solid #C5A361; /* Obere Border für den normalen Header */
}

/* Transition für den Sticky-Zustand des Headers */
.elementor-sticky--effects.elementor-header-shrink {
    transition: padding 0.5s ease-in-out, opacity 0.5s ease-in-out, box-shadow 0.5s ease-in-out, border-top 0.5s ease-in-out;
}

/* Zustand des Headers, wenn sticky und der Effekt aktiv ist */
.elementor-sticky--effects.elementor-header-shrink { /* Wiederholung, um die Spezifität zu erhöhen */
    padding-top: 3px;
    padding-bottom: 3px;
    opacity: 0.9; /* Leichte Transparenz im Sticky-Zustand */
    background-color: rgba(255, 255, 255, 0.9); /* Optional: Hintergrundfarbe mit leichter Transparenz */
    border-top: 2px solid #C5A361; /* Obere Border für den Sticky Header */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); /* Angepasster, etwas stärkerer Box Shadow */
}

/* Initialer Zustand des Logos (Bild) */
.elementor-header-shrink .sticky-logo-swap a img { /* Logo Bild initial */
    display: block;
    transform-origin: center left; /* Skalierung von der linken Mitte */
    max-height: none;
    width: auto;
    opacity: 1; /* Standardmäßig sichtbar */
}

/* Standard-Logo im Sticky-Zustand ausblenden */
.elementor-sticky--effects.elementor-header-shrink .sticky-logo-swap a img { /* Logo Bild sticky ausblenden */
    display: none;
    opacity: 0; /* Ausblenden */
    transform: scale(0.95); /* Logo Skalierung beibehalten */
    transform-origin: center left; /* Skalierung von der linken Mitte */
}

/* Sticky-Logo als Hintergrundbild einblenden */
.elementor-sticky--effects.elementor-header-shrink .sticky-logo-swap a {
    background-image: url('/wp-content/uploads/logo-praxisheld-favicon.png'); /* NEUE URL */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    min-height: 120px;
    width: 55px;
    text-indent: -9999px;
    overflow: hidden;
    opacity: 1;
    display: flex; /* Geändert zu flex */
    align-items: center; /* Vertikal zentrieren */
    justify-content: flex-start; /* Horizontale Ausrichtung */
    height: 100%; /* Nimmt die volle Höhe des Elternelements ein */
    margin-bottom:-60px;
}

/* min-width für größere Bildschirme */
@media (min-width: 768px) {
    .elementor-sticky--effects.elementor-header-shrink .sticky-logo-swap a {
        min-width: 220px; /* Breite des Hauptlogos für größere Bildschirme */
    }
}

/* Mobile Styles (bis 767px) */
@media (max-width: 767px) {
    /* Padding des Haupt-Containers im normalen Zustand (mobil) */
    .elementor-header-shrink {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* Breite des Logo-Widgets im Sticky Header (mobil) auf auto */
.elementor-sticky--effects.elementor-header-shrink .sticky-logo-swap a
 {
        width: 120px !important;
        margin-top:-20px;
    }
}

/***************************** Animated Button Icon ****************************/
.animated-icon-btn .elementor-button-icon {
  display: inline-block;
  transform: translateX(0px);
  will-change: transform;
  animation: slide-smooth-back 0.4s ease-in-out backwards; /* Standardmäßig keine Bewegung */
}

.animated-icon-btn .elementor-button:hover .elementor-button-icon {
  animation: slide-smooth-forward 0.4s ease-in-out forwards; /* Bewegung nach rechts beim Hover */
}

@keyframes slide-smooth-forward {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(10px);
  }
}

@keyframes slide-smooth-back {
  0% {
    transform: translateX(10px); /* Startposition für die Rückwärtsbewegung */
  }
  100% {
    transform: translateX(0px); /* Endposition: Ausgangsposition */
  }
}

/***************************** Table of content style ****************************/

.elementor-toc__list-wrapper.elementor-toc__list-wrapper .elementor-toc__list-item-text-wrapper:before {
content:none;
}

.elementor-toc__list-wrapper {
position: relative;
}

.elementor-toc__list-wrapper::before {
content: '';
position: absolute;
height: 100%;
top: 0;
left: 2px; /* position from the left of the vertical line */
border-left: 1px solid #000; /* styles of the vertical line */
}li.elementor-toc__list-item {
position: relative;
padding-left:26px; /* padding left to space the items away from the line */
}

.elementor-toc__list-item-text.isActive::after {
content: '';
position: absolute;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid #000; /* color and size of the triangle */
top: 0.7em; /* position from top of list item of the triangle */
left: 0;
transform: translateY(-50%);
}

.elementor-toc__list-item-text.isActive::before {
content: '';
position: absolute;
top: 0.7em;
left: 0;
transform: translateY(-50%);
background: #fff; /* color behind the triangle */
width: 20px; /* size of the color that covers the line behind the triangle */
height: 20px; /* idem */
}

.elementor-toc__list-item-text.isActive {
font-weight: bold; /* make the list item bold when is active */
}