.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{border-style:none;}.elementor-kit-9 button:hover,.elementor-kit-9 button:focus,.elementor-kit-9 input[type="button"]:hover,.elementor-kit-9 input[type="button"]:focus,.elementor-kit-9 input[type="submit"]:hover,.elementor-kit-9 input[type="submit"]:focus,.elementor-kit-9 .elementor-button:hover,.elementor-kit-9 .elementor-button:focus{border-style:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.nav-section {
    position: fixed;
    top: -110px; /* Höhe des Headers */
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
}
.custom-button-container {
    display: inline-block;
    position: relative;
}

.custom-button {
    display: flex;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.button-arrow {
    margin-left: 8px;
}

.underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #000;
    transition: width 0.3s ease;
}

.custom-button-container:hover .underline {
    width: 100%;
}


.product-container {
    position: relative;
    background: linear-gradient(to right, #0D91D2 5px, transparent 5px);
    overflow: hidden;
}

.product-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Beginne mit keiner Breite */
    height: 100%;
    background-color: #0D91D2; /* Ziel-Farbe bei Hover */
    transition: width 0.5s ease; /* Glatter Übergang der Breite */
    z-index: 0;
}

.product-container:hover::before {
    width: 100%; /* Volle Breite bei Hover, um die Farbe zu zeigen */
}

.product-container .title-hover,
.product-container .text-hover {
    color: #000000; /* Standardfarbe für Titel und Text */
}

/* Schriftfarbe bei Mouseover ändern */
.product-container:hover .title-hover,
.product-container:hover .text-hover {
    color: #FFFFFF!important;
}


/* Übergangseigenschaften für das Icon */
.product-container .arrow-hover .elementor-icon {
    transition: background-color 0.3s ease, fill 0.3s ease; /* Übergangseigenschaften für das Icon */
}

/* Hintergrundfarbe des Icons bei Mouseover ändern */
.product-container:hover .arrow-hover .elementor-icon {
    background-color: #FFFFFF!important; /* Hintergrundfarbe des Icons bei Mouseover */
}

/* Farbe des Icons bei Mouseover ändern */
.product-container:hover .arrow-hover .elementor-icon svg {
    fill: #0D91D2!important; /* Farbe des Icons bei Mouseover */
}

.site-footer {
    display: none;
}

.site-header {
    display: none;
}/* End custom CSS */