/* ==========================================================================
    Projectspezifisches CSS f. Hecht
   ========================================================================== */

/* ==========================================================================
    UIKIT Overwrites
   ========================================================================== */

.uk-text-small p {
    margin-bottom: 0.25rem;
    margin-top: 0;
}

.uk-accordion-title .uk-icon {
    margin-right: 1rem !important;
    vertical-align: 2px;
}

.download-section .uk-accordion .filename {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.download-section .uk-accordion table a {
    text-decoration: none;
}
.download-section .uk-accordion table a:hover {
    text-decoration: underline;
}

#sendPDFs:disabled {
    cursor: not-allowed;
    background-color: #5e6765 !important;
    opacity: 0.5;
}
#sendPDFs .uk-spinner svg {
    width: 20px !important;
}

.uk-subnav-divider {
    margin-left: 0;
}

.uk-subnav-divider > ::before {
    margin-right: 0.75rem;
}

.uk-h3 a {
  color: inherit !important;
}

/* ==========================================================================
    Hero
   ========================================================================== */
.hero-layout-c .hero-content {
    padding: 2.5vw;
    background-color: #eff4f3;
}

@media only screen and (max-width:639px) {
    .hero-layout-c .hero-content {
        padding: 5vw;
        background-color: #eff4f3;
        width: calc(100% + 30px);
        margin: 0 -15px;
        max-width: none;
    }
} 

.hero-layout-c .hero-content h1 span {
    font-weight: 700 !important;
    color:#E4032C !important;
}

.hero-layout-c .subheadline {
    margin-top: 2rem !important;
    text-wrap: auto;
}

/* ==========================================================================
    Blog Section
   ========================================================================== */

.blog-section *[class*="uk-h"] {
    color: #000 !important;
}

article.grid-item a.vd-link {
    color:#E4032C;
}
article.grid-item a.vd-link:hover {
    color: #829392;
}

/* ==========================================================================
    Fake-Button
   ========================================================================== */

#servicelinks .uk-card-body,
#sectors .uk-card-body {
    padding-top: 25px;
    padding-bottom: 25px;
}

/* ==========================================================================
    Links extra classes
   ========================================================================== */

a.red {
    color: #E4032C !important;
    font-weight: 600 !important;
}



/* ==========================================================================
    Cards
   ========================================================================== */
.link-content .uk-card-secondary {
    background: #5F7272;
    background: linear-gradient(45deg,rgba(95, 114, 114, 1) 0%, rgba(130, 147, 146, 1) 100%);
}
.link-content .uk-card-secondary:hover {
    background: #E4032C;
    background: linear-gradient(45deg,rgba(179, 21, 39, 1) 0%, rgba(228, 3, 44, 1) 50%, rgba(179, 21, 39, 1) 100%);
    transition-duration: 0.15s;
}
.link-content .uk-card-secondary:hover .uk-icon,
.extended.layout-3 div.submenu a:hover .uk-icon {
    transform: scale(1.25) translateX(0.25rem);
}

/* ==========================================================================
    Main Menu
   ========================================================================== */

/* Logo
   ========================================================================== */

/* Basiszustand – einmalig gesetzt */
.instant-fix .uk-navbar .svglogo {
    transition: transform 400ms ease-in-out !important;
    transform: scale(1) translateY(-25%);
}
.instant-fix .uk-navbar .uk-logo {
    padding: 2rem 0;
}
  
  /* Zustand bei Aktivierung (Sticky oder andere Klasse) */
  .instant-fix.uk-active .uk-navbar .svglogo  {
    transform-origin: center left !important;
    transform: scale(0.75);
  }
  .instant-fix.uk-active .uk-navbar .uk-logo {
    padding: 0.75rem 0;
}

.uk-navbar-nav {
    gap: 0 !important;
}
.uk-navbar-nav > li:hover,
.uk-navbar-nav > li:hover > * {
    background-color: #829392 !important;
    color: #fff !important;
}

#main-menu ul.uk-navbar-nav > li.uk-active > a,
.uk-sticky-fixed.uk-active #main-menu ul.uk-navbar-nav > li.uk-active > a {
    text-decoration: none !important;
    position: relative;
}
#main-menu ul.uk-navbar-nav > li.uk-active > a:after,
.uk-sticky-fixed.uk-active #main-menu ul.uk-navbar-nav > li.uk-active > a:after {
    content: '';
    position: absolute;
    display: block;
    width: calc(100% - 2rem);
    height: 1px;
    bottom: 5px;
    background-color: currentColor;
    left: 50%;
    transform: translateX(-50%);
}
#main-menu ul.uk-navbar-nav > li.uk-active > a:hover:after,
.uk-sticky-fixed.uk-active #main-menu ul.uk-navbar-nav > li.uk-active > a:hover:after {
    display: none;
}

/* Top Menu
   ========================================================================== */

#site-topbar .header-top-info {
    background-color: #f2f2f2;
    padding: 1rem 1rem 1rem 2rem; 
    color: #5e6765;
    font-size: 16px;
    font-family: "Source Sans 3";
}

@media only screen and (max-width:959px) {
    #site-topbar .uk-container {
        padding: 0;
    }
    #site-topbar .header-top-info {
        padding: 0.25rem 1rem;
        margin: 0 0 1rem;
        width: 100vw;
    }
    #site-topbar .inline-list {
        width: fit-content;
        margin: 0 0 0 auto;
    }
} 
@media only screen and (max-width:359px) { 
    #site-topbar .header-top-info {
        font-size: 11px;
    }
}

#site-topbar a {
    color: #5e6765;
}

#site-topbar a:hover,
#site-topbar .header-top-info .uk-form-custom:hover {
    color: #E4032C !important;
}

#site-topbar .uk-icon > * {
	transform: translate(0,-1px);
}
#site-topbar ul.inline-list.divider > li:nth-child(n+2)::before {
    background-color: rgba(136, 150, 147, 0.5);
}


/* Mobile Menu
   ========================================================================== */
.mobile-menu .uk-nav-sub {
    margin-bottom: 1.25rem;
    padding-top: 0;
}

.uk-modal-close-full {
    color: #fff;
}



/* Language Switcher
   ========================================================================== */

#language-switcher {
    min-width: 2.75rem;
}


/* Extended Submenu 3
   ========================================================================== */

.extended.layout-3 {
    box-shadow: none;
    padding: var(--paddingLarge) 0;
}

.extended.layout-3 div.submenu {
    padding: 0 0 0 100px !important;
}

.uk-dropdown.extended ul > li > a {
    font-size: 1.5rem !important;
}
.extended.layout-3 div.submenu a .uk-icon {
    transform: scale(1) translateX(0);
    transition: transform 0.15s;
}
.extended.layout-3 div.submenu a {
    padding: 10px;
}
.extended.layout-3 div.submenu a:hover,
.extended.layout-3 div.submenu li.uk-active > a {
    background-color: #a0b0af;
}


/* ==========================================================================
    Text-Roller
   ========================================================================== */

.textroller-wrapper {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
}

.textroller {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s ease-in-out;
}

/* ==========================================================================
    Contact on Home
   ========================================================================== */

#contact-cta {
	position: fixed;
	top: 30vh;
	right: 23px;
	z-index: 10;
	background: transparent;
	margin: 0 !important;
	padding: 0 !important;
    transition: all 0.2s ease;
}

#contact-cta a.toggle-contact {
    width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#contact-cta:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #474b4a;
    transform: rotate(45deg);
    z-index: -1;
    transition: all 0.2s ease;
}
#contact-cta.active {
    right: 0;
}
#contact-cta:hover::after {
    transform: rotate(135deg);
    background-color: #E4032C;
}
#contact-cta.active:after {
    transform: rotate(180deg) !important;
    background-color: #E4032C;
}
#contact-cta.active .toggle-contact { 
    display: none;
}
#contact-cta .contact-details {
    padding: 3rem;
}
#contact-cta .uk-close {
    color: #fff !important;
}

/* ==========================================================================
    Product - Page
   ========================================================================== */

.uk-width-expand .product-section {
    padding: var(--paddingLarge);
}
.uk-width-expand .process-section {
    padding: 0 var(--paddingLarge) var(--paddingLarge);
}

.product-section .grid-item .oeb-svg {
    width: 5rem;
}
.product-section .grid-item .process-svg {
    width: 3rem;
}

.product-section .grid-item .uk-h3 {
    color: #000;
}

.grid-layout-1 .grid-item.link-content:hover  .uk-h3 > span,
.product-section .grid-item:hover .uk-h3 {
    color: #E4032C !important;
}

/* Filter
   ========================================================================== */
li.mainProcess a {
    color: #000;
    display: inline-block;
    width: 100%;
    padding: 0.5rem;
    position: relative;
}
li.mainProcess > a:hover,
li.mainProcess.uk-active > a,
li.mainProcess.visible > a {
    color: #fff;
    background-color: #829392;
}
li.mainProcess.uk-active > a:after,
li.mainProcess.visible > a:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 7px 0 7px;
    border-color: #829392 transparent transparent transparent;
    transform: translateX(-50%);
}

li.mainProcess {
    font-size: 1rem;
    margin-top: 0 !important;
    padding-top: 0 !important;

}
li.mainProcess svg {
    display: inline-block;
    padding-right: 1rem;
    width: 2.5rem;
}

li.mainProcess > ul {
    display: none;
}

li.mainProcess.uk-active > ul,
li.mainProcess.visible > ul {
    display: block;
}

.sub-process {
    font-size: 14px;
    list-style: none;
}

.sub-process li > a {
    padding: 0.25rem;
}

.sub-process .uk-active > a {
    font-weight: 700;
}
.oebClass {
    margin: 0 !important;
    padding: 0 !important;
}
.oebClass > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000 !important;
    opacity: 0.5;
    transition: all 0.25s ease;
    font-size: 1rem;
    padding: 0.5rem;
}
.oebClass.uk-active > a,
.oebClass:hover > a {
    opacity: 1;
}
.oebClass svg,
.oebClass img {
    width: 4rem;
    max-width: 4rem;
    margin: 0 1rem 0 0;
}

.uk-offcanvas-bar {
    background-color: #fff;
}

.uk-offcanvas-overlay::before {
	background: rgba(0,0,0,.3);
}

.uk-offcanvas-bar *[class*="uk-h"],
.uk-offcanvas-bar a:hover,
.uk-offcanvas-bar .uk-icon {
    color: #000 !important;
}

/* ==========================================================================
    Product-Item-Page
   ========================================================================== */

.tmpl-product-item h1,
.tmpl-product-item span.uk-h2 {
    color: #000 !important;
}
.tmpl-product-item .process-svg {
    width: 2rem;
    margin: 0 1rem 0 0;
}
.tmpl-product-item .oeb-svg {
    width: 4rem;
    margin: 0 1rem 0 2rem;
}

.tmpl-product-item .uk-h2 {
    margin: 0 !important;
}
.tmpl-product-item .oeb-text .oeb-svg {
    display: inline;
    width: 8rem;
    padding: 0 1rem 0 0;
    margin: 0;
}

@media only screen and (min-width:960px) {
    .tmpl-product-item .text-layout-5 .uk-width-1-2\@m.uk-first-column {
        width: 25%;
    }
    .tmpl-product-item .text-layout-5 .uk-width-1-2\@m:not(.uk-first-column) {
        width: 75%;
     }

}

.tmpl-product-item .icons .uk-flex {
    width: max-content;
}

@media only screen and (max-width:639px) {
    .tmpl-product-item .intro-mobile {
        flex-wrap: wrap;
    }
    .tmpl-product-item .intro-mobile .icons {
        margin-top: 0.75rem;
    }
} 

/* Back Buttons
   ========================================================================== */

.backlink {
    margin-bottom: -1rem;
    z-index: 5;
}

.backlink > div {
    padding-top: 1rem;
    margin-bottom: -1rem;
}

@media only screen and (min-width:640px) {
    .backlink {
        margin-bottom: -3rem;
    }
} 

main .backlink a {
    text-decoration: none !important;
    font-size: 0.875rem;
}
main .backlink a:hover {
    text-decoration: none;
    color: #E4032C !important;
}

/* ==========================================================================
    Login Register
   ========================================================================== */

.tmpl-login-register .LoginRegisterPro .Inputfield:not(.InputfieldSubmit) {
    margin: 0;
	padding: 1rem 0;
	border: none;
	background: transparent;
}
.tmpl-login-register .LoginRegisterPro .InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) {
	margin-left: 1%;
}

/* ==========================================================================
    Conatct Page
   ========================================================================== */

#maps iframe {
    min-height: 100% !important;
}
#maps .iframe-item {
    aspect-ratio: 1;
}


/* ==========================================================================
    Footer
   ========================================================================== */
#footer {
    padding: 0 !important;
}
.footer-1 {
    background-color: #889693;
    position: relative;
    padding-top: var(--paddingLarge);
    padding-bottom: var(--paddingLarge);
}
.footer-1:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 16px 16px 0 16px;
    border-color: #889693 transparent transparent transparent;
    transform: rotate(0deg);
}
.footer-1 * {
    margin-bottom: 0 !important;
}

.footer-2 {
    background-color: #5e6765;
    color: #fff;
    padding-top: var(--paddingLarge);
    padding-bottom: 0;
}
.footer-3 {
    background-color: #5e6765;
    color: #fff;
    padding-top: 0;
    padding-bottom: var(--paddingLarge);
}

.footer-2 .social-links {
    margin-top: 2px;
    padding: 2rem 2.5rem;
    background-color: #474b4a;
    
}
.footer-2 .social-links span{
    position: relative;
}
.footer-2 .social-links span:after {
    content: '';
    width: 150%;
    height: 150%;
    display: block;
    top:50%;
    left:50%;
    border: 1px solid #fff;
    transform: translate(-50%,-50%) rotate(45deg);
    transform-origin: center;
    position: absolute;
}

@media only screen and (max-width:959px) {
    .uk-width-2-5\@l {
        margin-top: 2.5rem;
    }
}

#footer .uk-h3 {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
    Fixes & Hacks
   ========================================================================== */

/*** - Slider Layout E - make content overflow to show all items and hide text - ***/

@media (min-width: 1600px) {
    .slider-layout-e .uk-child-width-1-3\@xl>* {
        width:calc((100% / 3) + 2px)
    }
}

/*** - Animation of SVG Icons - ***/

svg {
    height: 100%;
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 52.320003509521484px;
    stroke-dasharray: 52.320003509521484px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 52.320003509521484px;
  }
}

.uk-card-body:hover #battery .svg-elem-1 {
    animation: animate-svg-stroke-1 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s both;
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 212.36000061035156px;
    stroke-dasharray: 212.36000061035156px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 212.36000061035156px;
  }
}

.uk-card-body:hover #battery .svg-elem-2 {
    animation: animate-svg-stroke-2 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s both;
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 42.67000198364258px;
    stroke-dasharray: 42.67000198364258px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 42.67000198364258px;
  }
}

.uk-card-body:hover #battery .svg-elem-3 {
    animation: animate-svg-stroke-3 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.24s both;
}

@keyframes phanimate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 262.6618347167969px;
    stroke-dasharray: 262.6618347167969px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 262.6618347167969px;
  }
}

.uk-card-body:hover #pharma .svg-elem-1 {
    animation: phanimate-svg-stroke-1 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s both;
}

@keyframes phanimate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 53.810001373291016px;
    stroke-dasharray: 53.810001373291016px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 53.810001373291016px;
  }
}

.uk-card-body:hover #pharma .svg-elem-2 {
          animation: phanimate-svg-stroke-2 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.12s both;
}


@keyframes phanimate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 55.20000457763672px;
    stroke-dasharray: 55.20000457763672px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 55.20000457763672px;
  }
}

.uk-card-body:hover #pharma .svg-elem-3 {
    animation: phanimate-svg-stroke-3 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.24s both;
}

@keyframes phanimate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 55.19999694824219px;
    stroke-dasharray: 55.19999694824219px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 55.19999694824219px;
  }
}

.uk-card-body:hover #pharma .svg-elem-4 {
    animation: phanimate-svg-stroke-4 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.36s both;
}


@keyframes phanimate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 55.20001220703125px;
    stroke-dasharray: 55.20001220703125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 55.20001220703125px;
  }
}

.uk-card-body:hover #pharma .svg-elem-5 {
    animation: animate-svg-stroke-5 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.48s both;
}


@keyframes foanimate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 90.31999206542969px;
    stroke-dasharray: 90.31999206542969px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 90.31999206542969px;
  }
}

.uk-card-body:hover #food .svg-elem-1 {
    animation: foanimate-svg-stroke-1 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s both;
}


@keyframes foanimate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 23.959999084472656px;
    stroke-dasharray: 23.959999084472656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 23.959999084472656px;
  }
}

.uk-card-body:hover #food .svg-elem-2 {
    animation: foanimate-svg-stroke-2 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.12s both;
}


@keyframes foanimate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 23.959999084472656px;
    stroke-dasharray: 23.959999084472656px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 23.959999084472656px;
  }
}

.uk-card-body:hover #food .svg-elem-3 {
    animation: foanimate-svg-stroke-3 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.24s both;
}

@keyframes foanimate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 33.27584457397461px;
    stroke-dasharray: 33.27584457397461px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 33.27584457397461px;
  }
}

.uk-card-body:hover #food .svg-elem-4 {
    animation: foanimate-svg-stroke-4 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.36s both;
}

@keyframes foanimate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 127.5466537475586px;
    stroke-dasharray: 127.5466537475586px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 127.5466537475586px;
  }
}

.uk-card-body:hover #food .svg-elem-5 {
    animation: foanimate-svg-stroke-5 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.48s both;
}

@keyframes foanimate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 171.333251953125px;
    stroke-dasharray: 171.333251953125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 171.333251953125px;
  }
}

.uk-card-body:hover #food .svg-elem-6 {
    animation: foanimate-svg-stroke-6 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s both;
}


@keyframes chanimate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 63.160003662109375px;
    stroke-dasharray: 63.160003662109375px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 63.160003662109375px;
  }
}

.uk-card-body:hover #chemie .svg-elem-1 {
    animation: chanimate-svg-stroke-1 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s both;
}



@keyframes chanimate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 254.09596252441406px;
    stroke-dasharray: 254.09596252441406px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 254.09596252441406px;
  }
}

.uk-card-body:hover #chemie .svg-elem-2 {
    animation: chanimate-svg-stroke-2 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.12s both;
}


@keyframes chanimate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 20.420001983642578px;
    stroke-dasharray: 20.420001983642578px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 20.420001983642578px;
  }
}

.uk-card-body:hover #chemie .svg-elem-3 {
    animation: chanimate-svg-stroke-3 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.24s both;
}


@keyframes chanimate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 63.160003662109375px;
    stroke-dasharray: 63.160003662109375px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 63.160003662109375px;
  }
}

.uk-card-body:hover #chemie .svg-elem-4 {
    animation: chanimate-svg-stroke-4 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.36s both;
}

@keyframes chanimate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 254.09596252441406px;
    stroke-dasharray: 254.09596252441406px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 254.09596252441406px;
  }
}

.uk-card-body:hover #chemie .svg-elem-5 {
    animation: chanimate-svg-stroke-5 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.48s both;
}

@keyframes chanimate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 20.420001983642578px;
    stroke-dasharray: 20.420001983642578px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 20.420001983642578px;
  }
}

.uk-card-body:hover #chemie .svg-elem-6 {
    animation: chanimate-svg-stroke-6 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s both;
}

main.tmpl-news-tags section {
    margin-top: calc(var(--paddingSize) * (-1)) !important;
}