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

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


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

/***************************** 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-widget-table-of-contents {
position: sticky; /* make the table of content sticky */
top:100px; /* sticky 100px from the top */
}

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