/*
 Theme Name:   KBS
 Description:  KBS Kunststoff-Beschichtungs-Service GmbH | WordPress Child Theme
 Author:       Neckarmedia
 Author URI:   https://www.neckarmedia.com
 Template:     enfold
*/

/* @link https://utopia.fyi/type/calculator?c=375,18,1.125,1760,24,1.2,7,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--1: clamp(1rem, 0.9323rem + 0.2888vw, 1.25rem);
  --step-0: clamp(1.125rem, 1.0235rem + 0.4332vw, 1.5rem);
  --step-1: clamp(1.2656rem, 1.1209rem + 0.6173vw, 1.8rem);
  --step-2: clamp(1.4238rem, 1.2245rem + 0.8505vw, 2.16rem);
  --step-3: clamp(1.6018rem, 1.3337rem + 1.1439vw, 2.592rem);
  --step-4: clamp(1.802rem, 1.4478rem + 1.5115vw, 3.1104rem);
  --step-5: clamp(2.0273rem, 1.5656rem + 1.9699vw, 3.7325rem);
  --step-6: clamp(2.2807rem, 1.6855rem + 2.5395vw, 4.479rem);
  --step-7: clamp(2.5658rem, 1.8052rem + 3.245vw, 5.3748rem);
}

:root {
    --primary-font: 'TT Commons Pro', sans-serif;
    --heading-font: 'TT Commons Pro', sans-serif;
    --kbs-black: #161B1C;
    --kbs-white: #ffffff;
    --kbs-silver: #E9E9E9;
    --kbs-green: #5BB56C;
    --kbs-green-light: #BADEC0;
    --kbs-skew: skew(36deg);
}

/*TT Commons Pro*/
@font-face {
    font-family: 'TT Commons Pro';
    src: url('fonts/tt_commons_pro_regular-webfont.woff2') format('woff2'),
         url('fonts/tt_commons_pro_regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'TT Commons Pro';
    src: url('fonts/tt_commons_pro_medium-webfont.woff2') format('woff2'),
         url('fonts/tt_commons_pro_medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'TT Commons Pro';
    src: url('fonts/tt_commons_pro_demibold-webfont.woff2') format('woff2'),
         url('fonts/tt_commons_pro_demibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}


/* =======================================================================================================================================
Typo
======================================================================================================================================= */
html{-webkit-tap-highlight-color: transparent;}
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
body,p{font-family: var(--primary-font); font-size: var(--step-0); font-weight: 400; line-height: 1.5}
p{margin: 0 0 1.5em;}
h1,h2,h3,h4,h5,h6{font-family: var(--heading-font); font-weight: 600 !important; line-height: 1.1; letter-spacing: 0 !important; text-transform: inherit !important; margin: 0 0 .4em 0 !important; text-wrap: balance;}
sup{font-size: .5em;}

#top h1{font-size: var(--step-6);}
#top h2{font-size: var(--step-5);}
#top h3{font-size: var(--step-2);}
#top h4{font-size: var(--step-1);}
#top h5{font-size: var(--step-1);}
#top h6{font-size: var(--step-0);}

#top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
#top .av-special-heading{padding: 0 !important}
#top .av-special-heading .av-special-heading-tag{float: none}
#top .av-special-heading .special-heading-border{display: none;}
#top .av-special-heading.avia-builder-el-no-sibling .av-special-heading-tag{margin: 0 !important}
#top .av-subheading_below p{font-weight: 700; font-size: var(--step-1); margin: 0 0 1em; line-height: 1.3;}
#top .main_color .av-subheading_below p{color: var(--secondary-color);}

#top .__styled-heading .av-special-heading-tag{
    display: flex;
    gap: 1em;
    align-items: center;
    min-height: 3.6em;
    margin: 2em 0 !important;
}
#top .__styled-heading + .av_textblock_section{padding-left: 15%}
#top .__styled-heading .av-special-heading-tag::before{
    content: '\e801';
    font-family: 'kbs-icons';
    color: var(--kbs-green);
}
#top .__styled-heading .av-special-heading-tag::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='488' height='135' viewBox='0 0 488 135' fill='none'%3E%3Cpath d='M480.941 134.932H0V131.965H480.901C482.321 131.965 483.543 131.213 484.135 129.907C484.726 128.601 484.569 127.177 483.662 126.069L386.574 6.33114C384.839 4.19438 382.276 2.96772 379.516 2.96772H0V0H379.516C383.144 0 386.574 1.62235 388.862 4.47137L486.028 124.209C487.645 126.187 487.96 128.878 486.856 131.173C485.752 133.468 483.504 134.932 480.941 134.932Z' fill='%23E9E9E9'/%3E%3C/svg%3E");
}

#top .avia-section b,
#top .avia-section strong,
#top .footer_color b,
#top .footer_color strong,
#top .socket_color b,
#top .socket_color strong{color: inherit;}

::selection {
    background-color: color-mix(in srgb, var(--kbs-green) 80%, white 20%);
    color: var(--kbs-black);
}

/* Links */
#top .avia_textblock a:where(:not(.wp-element-button)):not(:has(img)),
#top .toggle_content a:where(:not(.wp-element-button)):not(:has(img)){
    border-bottom: .1em solid var(--kbs-green);
    transition: color .2s;
}
#top .avia_textblock a:where(:not(.wp-element-button)):not(:has(img)):hover,
#top .toggle_content a:where(:not(.wp-element-button)):not(:has(img)):hover{
    color: var(--kbs-green);
}

/* Button */
html #top .avia-button{
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: var(--step-0);
    font-weight: 500;
    padding: .4em 1em;
    border-radius: .4em;
    background-color: var(--kbs-green);
    border-width: 2px !important;
    border-style: solid;
    border-color: var(--kbs-green);
    color: var(--kbs-black);
    text-decoration: none !important;
    transition: translate .2s ease, border-radius .4s ease;
    margin: 0 .4em .25em 0;
}
html #top .avia-button.avia-color-theme-color{background-color: var(--kbs-green); border-color: var(--kbs-green); color: var(--kbs-black);}
html #top .avia-button.avia-color-silver{background-color: var(--kbs-silver); border-color: var(--kbs-silver); color: var(--kbs-black);}
html #top .avia-button.avia-color-black{background-color: var(--kbs-black); border-color: var(--kbs-black); color: var(--kbs-white);}
html #top .avia-button.avia-color-dark{background-color: transparent; border-color: var(--kbs-green); color: var(--kbs-black);}
html #top .avia-button.avia-color-dark .avia_button_icon{color: var(--kbs-green);}
html #top .avia-button.avia-color-dark .avia_button_icon svg:first-child{fill: var(--kbs-green); stroke: var(--kbs-green);}
html #top .avia-button.avia-color-light{background-color: transparent; border-color: var(--kbs-white); color: var(--kbs-green);}
html #top div .avia-button:hover{translate: 0 -2px; opacity: 1; border-radius: .6em;}

html #top .avia-button .avia_button_icon{left: 0; display: flex;}
html #top .avia-button .avia_button_icon svg:first-child{margin: 0;}

/* Blockquote */
#top blockquote{border: 0; font-size: var(--step-1); margin: 2em 0 2em; padding: 0 0 0 2em; position: relative; max-width: 580px; line-height: 1.6; font-weight: 500;}
#top blockquote:before{content: '\e805'; font-family: 'kbs-icons'; position: absolute; top: -.3em; left: 0; opacity: .1; font-size: 4em; line-height: 1}
#top blockquote p{font-size: 1em; margin: 0; font-weight: 500;}

/* List */
#top .avia_textblock ul{
    list-style: none;
    margin: 0 0 1em 1em;
}
#top .avia_textblock ul > li{
    margin: 0 0 0.5em 0;
    padding: 0 0 0 1em;
    position: relative;
}
#top .avia_textblock ul > li:before{
    content: '\e8bd';
    font-family: 'entypo-fontello';
    position: absolute;
    left: 0;
    display: inline-block;
}

#top ol.__styled-ol{
    counter-reset: styled-counter;
    display: flex;
    flex-wrap: wrap;
    gap: 1em 3em;
    list-style: none;
    margin: 1em 0 2em;
    padding: 0;
}

#top ol.__styled-ol li{
    font-size: var(--step--1);
    position: relative;
    counter-increment: styled-counter;
    padding-left: 2.5em;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 280px;
    max-width: 480px;
}
#top ol.__styled-ol li strong{
    display: block;
    font-size: var(--step-0);
}
#top ol.__styled-ol li::before{
    content: counter(styled-counter);
    position: absolute;
    left: 0;
    top: .25em;
    font-size: 2.5em;
    font-weight: 600;
    line-height: 1;
    color: var(--kbs-green);
}


#top ol.__styled-ol-2 {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2.5em 5em;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    padding: 0;
}

#top ol.__styled-ol-2 li {
    counter-increment: step;
    margin-bottom: 1em;
    position: relative;
    padding-left: 3em;
    margin: 0;
    font-weight: 500
}

#top ol.__styled-ol-2 li::before {
    content: "0" counter(step);
    position: absolute;
    left: 0;
    top: .2em;
    color: var(--primary);
    font-size: var(--step-2)
}


/* =======================================================================================================================================
Header
======================================================================================================================================= */
#header{background-color: var(--enfold-header-color-bg);}

@media only screen and (max-width: 989px){ 
    .responsive #top #header{position: fixed !important; top: 0; left: 0; right: 0; width: 100%}
    .responsive #top #main,
    .responsive.html_mobile_menu_tablet.html_header_top #top #main{padding-top: 80px !important}
    .responsive #top #wrap_all .av-logo-container,
    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a,
    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container,
    .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a{
        height: 80px;
        line-height: 80px;
    }
}

@media only screen and (min-width: 990px){
    #header{transition: translate .2s ease;}
    #header .inner-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2em;
    }
    #header .inner-container > .logo{order: 1; margin-right: auto; position: relative;}
    #header .inner-container > nav{order: 3;}
    #header.scrolled{translate: 0 -50%;}
}

/* Logo */
#header_main .inner-container > .logo,
#header_main .inner-container > .logo a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: visible}
#header_main .inner-container > .logo a{height: auto}
#header_main .inner-container > .logo a svg,
#header_main .inner-container > .logo a img{width: auto; height: 20px !important;}

#header .inner-container > .logo a svg path:nth-of-type(1){transition: opacity .6s ease; transition-delay: .18s;}
#header .inner-container > .logo a svg path:nth-of-type(2){transition: opacity .6s ease; transition-delay: .15s;}
#header .inner-container > .logo a svg path:nth-of-type(3){transition: opacity .6s ease; transition-delay: .12s;}
#header.scrolled .inner-container > .logo a svg path:nth-of-type(-n+3){opacity: 0;}

@media only screen and (min-width: 990px){
    #header_main .inner-container > .logo{transition: padding-top .2s ease;}
    #header.scrolled .inner-container > .logo{padding-top: 80px}
    #header_main .inner-container > .logo a svg,
    #header_main .inner-container > .logo a img{height: 28px !important}
}

@media only screen and (min-width: 1440px){
    #header_main .inner-container > .logo a svg,
    #header_main .inner-container > .logo a img{height: 48px !important}
}

/* Navigation */
@media only screen and (min-width: 990px){
    #header_main .inner-container > nav.main_menu{display: flex; align-items: center; padding-top: 40px; transition: padding-top .2s ease;}
    #header.scrolled .inner-container > nav.main_menu{padding-top: 80px}
    #header_main .inner-container > nav.main_menu > div,
    #header_main .inner-container > nav.main_menu > div > ul,
    #header_main .inner-container > nav.main_menu > div > ul > li{height: 100%}
    #header_main .inner-container > nav.main_menu > div > ul > li.menu-item{display: flex; align-items: center}
    #header_main .inner-container > nav.main_menu ul#avia-menu a{transition: opacity .2s ease;}
    #header_main .inner-container > nav.main_menu ul#avia-menu a:hover{opacity: .5 !important;}
    #header_main .inner-container > nav.main_menu ul#avia-menu li.current-menu-item > a{color: var(--kbs-green);}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > a{line-height: 1.1 !important; height: auto !important; font-size: var(--step-0); font-weight: 400; text-decoration: none; padding: 0 .3em;}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > a .avia-menu-text{display: inline-block; border-bottom: 2px solid transparent;}
    #header_main .inner-container > nav.main_menu ul#avia-menu > li .sub-menu li > a{font-size: var(--step--1); border: 0}
}

@media only screen and (min-width: 1440px){
    #header_main .inner-container > nav.main_menu ul#avia-menu > li > a{padding: 0 .6em;;}
}

/* Meta Menu */
#header_main .inner-container > nav.kbs_meta_menu{
    line-height: 1.1;
    position: absolute;
    top: 50%;
    right: 44px;
    translate: 0 -50%;
    z-index: 200;
}
#header_main .inner-container > nav.kbs_meta_menu > ul{
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .75em;
    padding: 0 .5em 0;
}
#header_main .inner-container > nav.kbs_meta_menu > ul > li > a{
    font-size: 12px;
    font-weight: 500;
    padding: .4em 1em;
    border-radius: .4em;
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    border-color: var(--kbs-green);
    display: inline-flex;
    gap: .5em;
    transition: translate .2s ease, border-radius .4s ease;
}
#header_main .inner-container > nav.kbs_meta_menu > ul > li > a:hover{translate: 0 -2px; border-radius: .6em;}

#header_main .inner-container > nav.kbs_meta_menu > ul > li:nth-child(1) > a{
    color: var(--kbs-black);
    background-color: var(--kbs-green);
}
#header_main .inner-container > nav.kbs_meta_menu > ul > li:nth-child(1) > a::before{
    content: '\e800';
    font-family: 'kbs-icons';
}

@media only screen and (min-width: 990px){
    #header_main .inner-container > nav.kbs_meta_menu{
        position: absolute;
        top: 1em;
        right: 0;
        translate: 0;
    }
    #header_main .inner-container > nav.kbs_meta_menu > ul > li > a{
        font-size: var(--step--1);
    }
}

/* Hamburger Menu */
.av-hamburger-box{width: 32px}
.av-hamburger-inner, 
.av-hamburger-inner::before, 
.av-hamburger-inner::after{border-radius: 0}
.av-hamburger-inner, 
.av-hamburger-inner::after, 
.av-hamburger-inner::before{height: 2px;}
#top ul#av-burger-menu-ul{vertical-align: top}
#top ul#av-burger-menu-ul li a{border: 0}
#top ul#av-burger-menu-ul li a:hover{background: inherit !important;}
#top ul#av-burger-menu-ul > li > a{font-size: var(--step-1); font-weight: 400; line-height: 1.1 !important;}
#top ul#av-burger-menu-ul > li > a .avia-menu-text{display: inline-block;}
#top ul#av-burger-menu-ul > li.current-menu-item > a .avia-menu-text{border-bottom: 2px solid;}


/* =======================================================================================================================================
Accessibility / Barrierefreiheit
======================================================================================================================================= */
#top :focus-visible{
    outline: 0.2rem dotted var(--kbs-green) !important;
    outline-offset: .2rem !important;
}
#top .__background-green :focus-visible{
    outline-color: currentColor !important;
}


/* =======================================================================================================================================
Misc
======================================================================================================================================= */
/* Layout */
.container_wrap{border: 0;}
.widgettitle{font-weight: inherit; text-transform: inherit; letter-spacing: inherit; font-size: inherit;}
.__background-green{background-color: var(--kbs-green);}

#top .__section-small .container{max-width: 1440px;}
#top .avia-section-default .content{padding-top: clamp(60px, 12vw, 160px); padding-bottom: clamp(60px, 12vw, 160px);}
#top .flex_column_table.av-equal-height-column-flextable:not(:first-child){margin-top: clamp(20px, 4vw, 120px);}

/* Images */
#top .image-overlay{display: none !important;}
#top .avia_image,
#top .av-image-caption-overlay,
#top .avia-image-container-inner{border-radius: 0}

#top .avia-image-container .av-caption-image-overlay-bg{display: none !important;}
#top .avia-image-container .av-image-caption-overlay-center{
    font-size: var(--step-0);
    padding: 0;
    line-height: 1.5;
    height: 100%;
    display: block;
}
#top .avia-image-container .av-image-caption-overlay-center > p{
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    font-size: var(--step-1);
    padding: .5em 1.5em;
    border-radius: .4em;
    background-color: transparent;
    color: var(--kbs-black);
    position: absolute;
    left: -1em;
    top: 2em;
}
#top .avia-image-container .av-image-caption-overlay-center > p::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--kbs-green);
    border-radius: .4em;
    z-index: -1;
    transform: var(--kbs-skew);
}

#top .flex_column:has(.avia-image-container .av-image-caption-overlay-center .__service-icons){z-index: 10;}
#top .avia-image-container .av-image-caption-overlay-center .__service-icons{
    position: absolute;
    bottom: 1em;
    right: calc(-1 * ((var(--step--1) * 1.75)));
}
#top .avia-image-container .av-image-caption-overlay-center .__service-icons.__single{
    right: inherit;
    bottom: inherit;
    top: 1em;
    left: calc(-1 * ((var(--step-0) * 1.75)));
}
#top .avia-image-container .av-image-caption-overlay-center .__service-icons.__single .__service-icon{font-size: var(--step-0);}
#top .avia-image-container .av-image-caption-overlay-center .__service-icons.__single .__service-icon > p{transform: rotateY(0);}

@media (max-width: 989px){
    #top .avia-image-container .av-image-caption-overlay-center .__service-icons:not(.__single) .__service-icon > p{display: none !important;}
}

/*
#top .avia-image-container .av-image-caption-overlay-center .__skew-wrap{
    font-size: var(--step-0);
    padding: 2em 0 0 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 1em;
    align-items: flex-end;
    flex-direction: column;
    translate: 1em .5em;
}
#top .avia-image-container .av-image-caption-overlay-center .__skew-wrap:has(strong){
    justify-content: flex-end;
}
#top .avia-image-container .av-image-caption-overlay-center .__skew-wrap br{display: none;}
#top .avia-image-container .av-image-caption-overlay-center .__skew-wrap .__skew{font-size: 1em}
#top .avia-image-container .av-image-caption-overlay-center .__skew-wrap .__skew:has(strong){
    align-self: flex-start; 
    font-size: var(--step-1);
    margin-bottom: auto;
    translate: -2em 0;
}

@media only screen and (max-width: 989px){
    #top .avia-image-container:has(.__skew-wrap){margin-bottom: 2em;}
    #top .avia-image-container .av-image-caption-overlay-center .__skew-wrap{padding: 1em 0 0 0;}
    #top .avia-image-container .av-image-caption-overlay-center .__skew-wrap{font-size: var(--step--1);}
}
*/

#top .avia-image-container.__styled-image::after{
    content: '';
    display: block;
    position: absolute;
    bottom: -10%;
    right: 60%;
    width: 200%;
    height: 6em;
    background-color: var(--kbs-green);
    border-radius: .5em;
    transform: var(--kbs-skew);
    pointer-events: none;
}

@media only screen and (max-width: 989px){
    #top .avia-image-container.__styled-image{margin-bottom: 2em;}
    #top .avia-image-container.__styled-image::after{bottom: -5%;}
}

/* Toggle */
#top section.av_toggle_section .toggler{padding: .75em 3em .75em 2rem; margin: 0 0 .8em; font-size: var(--step-0); background: transparent; border: 2px solid var(--kbs-green); border-radius: .5em}
#top section.av_toggle_section .toggler:hover{background: transparent;}
#top section.av_toggle_section .toggler .toggle_icon{display: none;}
#top section.av_toggle_section .toggler:after{
	content: '\e800';
    font-family: 'kbs-icons';
    position: absolute;
    right: 1em;
    transition: .2s ease;
    color: var(--kbs-green);
}
#top section.av_toggle_section .toggler.activeTitle:after{rotate: 90deg}
#top section.av_toggle_section .toggle_content{border: 0; background: transparent; padding: .5em 2rem 1.5em;}
#top section.av_toggle_section .toggle_content *{font-size: var(--step--1);}

#top section.av_toggle_section .single_toggle:has(:focus-visible){overflow: visible;}
#top .__background-green section.av_toggle_section .toggler{border-color: currentColor;}
#top .__background-green section.av_toggle_section .toggler:after{color: currentColor}

/* Social Icons */
#top ul.__social--media--icons{
    display: flex;
    gap: 0;
    font-size: var(--step-2);
    margin: 0 0 1em 0;
    line-height: 1;
}
#top ul.__social--media--icons > li > a{padding: .2em .4em;}

/* Skew span */
#top span.__skew{
    display: inline-block; 
    font-weight: 500;
    line-height: 1.5;
    font-size: var(--step-0);
    padding: .5em 1.5em;
    border-radius: .4em;
    background-color: transparent;
    color: var(--kbs-black);
    position: relative;
}
#top span.__skew::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--kbs-green);
    border-radius: .4em;
    z-index: -1;
    transform: var(--kbs-skew);
}

/* Box */
#top .__box{
    padding: 4em 2em;
    border-radius: .5em;
    background-color: var(--kbs-white);
    border: 2px solid var(--kbs-green);
}
#top .footer_color .__box{
    background-color: var(--enfold-footer-color-bg);
}
#top .__box.__express::before{
    content: '';
    position: absolute;
    top: -2.5em;
    left: 50%;
    width: 280px;
    height: auto;
    translate: -50% 0;
    max-width: 80%;
    aspect-ratio: 444 / 165;
    background-image: url(img/24h-express.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    visibility: visible;
}

@media only screen and (max-width: 989px){
    #top .__box.__express.av-break-at-tablet::before{
        position: static;
        margin: -2em 0 1em 0;
        translate: 0;
    }
}

@media only screen and (max-width: 767px){
    #top .__box.__express::before{
        position: static;
        margin: -2em 0 1em 0;
        translate: 0;
    }
}

/* Styled Section 1 */
#top .__styled-section-1{position: relative}
#top .__styled-section-1::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
    height: auto;
    aspect-ratio: 480/320;
    background-color: var(--kbs-green);
    border-radius: .5em;
    transform: var(--kbs-skew) translate(80%, 0px);
    pointer-events: none;
}

@media only screen and (min-width: 1920px){
    #top .__styled-section-1::before{width: 480px; transform: var(--kbs-skew) translate(50%, 0px);}
}

/* Promobox */
#top .av_promobox{
    border: 0;
    overflow: initial;
    padding: 0;
    clear: initial;
    margin: 2em 0 0;
    width: 100%;
    float: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 1em 2em;
    flex-wrap: wrap;
}
#top .av_promobox .avia-promocontent{margin: 0; flex-basis: 0; flex-grow: 1; min-width: 320px;}
#top .av_promobox .avia-promocontent p{font-size: var(--step-0); margin: 0;}
#top .av_promobox .avia-button-wrap{float: none;}
#top .av_promobox .avia-button{
    position: static;
    background-color: transparent !important;
    border-color: var(--kbs-green) !important;
    color: var(--kbs-black) !important;
}
#top .av_promobox .avia-button .avia_button_icon{color: var(--kbs-green);}

/* Circle Text */
#top .__circle-text{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--kbs-green);
    padding: 1.5em;
    font-size: var(--step--1);
    line-height: 1.2;
    animation: animateCircleText 3s ease-in-out infinite;
}
#top .__circle-text::after{
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 .2em currentColor;
    pointer-events: none;
    scale: .85;
}

@media only screen and (max-width: 989px){
    #top .__circle-text{font-size: 12px;}
}

@keyframes animateCircleText {
    0% {
        background: var(--kbs-green);
    }

    50% {
        background: var(--kbs-silver);
    }

    100% {
        background: var(--kbs-green);
    }
}

/* Icon */
#top .av_font_icon.avia-icon-pos-left{margin: 0 2em 1em 0;}
#top .av_font_icon .av-icon-char{
    border-radius: 50%;
    border: 0;
    padding: 0;
    font-size: var(--step-5);
    line-height: 1;
    width: 1.75em;
    height: 1.75em;
    display: grid;
    place-content: center;
    background: var(--kbs-green);
    color: var(--kbs-black);
}
#top .av_font_icon .av_icon_caption{
    font-family: var(--primary-font);
    font-size: var(--step-0);
    text-transform: inherit;
    line-height: inherit;
    text-align: center;
    margin-top: .25em;
    font-weight: 600;
}

/* Service Icons */
#top .__service-icons{
    display: inline-flex;
    flex-direction: column;
    gap: .5em;
}

#top .__service-icon{
    position: relative;
    font-size: var(--step--1);
    display: inline-block;
    perspective: 500px;
}
#top .__service-icon > .av-icon-char{
    position: relative;
    border-radius: 50%;
    border: 0;
    padding: 0;
    font-size: 2em;
    line-height: 1;
    width: 1.75em;
    height: 1.75em;
    display: grid;
    place-content: center;
    background: var(--kbs-green);
    color: var(--kbs-black);
}
#top .__service-icon > p{
    margin: 0;
    font-size: 1em;
    white-space: nowrap;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 3.5em;
    padding: .25em 1.5em .25em 2.5em;
    font-weight: 700;
    transform-origin: left;
    translate: -1.5em -50%;
    transition: .3s;
    transform: rotateY(90deg);
    color: var(--kbs-black);
}
#top .__service-icon > p::before{
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--kbs-white);
    border: 2px solid var(--kbs-green);
    border-radius: .4em;
    z-index: -1;
    transform: var(--kbs-skew);
}
#top .__service-icon:hover > p{transform: rotateY(0deg);}

/* Behandlung Swiper */
#top .__behandlung-swiper-wrap > .behandlungSwiper{
    -webkit-mask-image: linear-gradient(to right, #000 30%, transparent);
    mask-image: linear-gradient(to right, #000 30%, transparent);
}
#top .__behandlung-swiper-wrap > .__behandlung-swiper-title{margin: 0 0 2em 0; white-space: nowrap;}

#top .behandlungSwiper .swiper-slide{width: 260px; padding: 0 1em 0 0}
#top .behandlungSwiper .swiper-slide > .av-icon-char{
    position: relative;
    border-radius: 50%;
    border: 2px solid var(--kbs-black);
    padding: 0;
    font-size: 2em;
    line-height: 1;
    width: 1.75em;
    height: 1.75em;
    display: grid;
    place-content: center;
    background: var(--kbs-white);
    color: var(--kbs-black);
}
#top .behandlungSwiper .swiper-slide:has(.av-icon-char)::before{
    content: '';
    position: absolute;
    top: 1.75em;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--kbs-black);
    pointer-events: none;
}
#top .behandlungSwiper .swiper-slide p{margin: .5em 0 0; font-size: var(--step--1); max-width: 220px}

#top .__behandlung-swiper-wrap > .__behandlung-swiper-title .__skew[data-title="Oberflächenvorbehandlung"]{color: var(--kbs-white);}
#top .__behandlung-swiper-wrap > .__behandlung-swiper-title .__skew[data-title="Oberflächenvorbehandlung"]::before{background-color: var(--kbs-black);}

@media (min-width: 990px){
    #top .__behandlung-swiper-wrap{
        display: flex;
        align-items: flex-start;
        gap: 2em;
    }
    #top .__behandlung-swiper-wrap > .__behandlung-swiper-title{
        width: 35%;
        flex-basis: 35%;
        min-width: 460px;
    }
    #top .__behandlung-swiper-wrap > .behandlungSwiper{
        width: 65%;
        flex-basis: 65%;
    }
}

/* Icon Box Swiper */
#top .iconBoxSwiper{
    padding: 1.75em 8px 1em;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
    mask-image: linear-gradient(to right, #000 90%, transparent);
}
#top .iconBoxSwiper .swiper-slide{
    width: 360px;
    padding: 0 2em 0 0;
}
#top .iconBoxSwiper .swiper-slide .__icon-box-swiper-inner{
    position: relative;
    box-shadow: 0 0 8px #00000010;
    border-radius: 1em;
    padding: 3em 1em 2em;
    background-color: var(--kbs-white);
}
#top .iconBoxSwiper .swiper-slide .__icon-box-swiper-inner *{color: var(--kbs-black);}
#top .iconBoxSwiper .swiper-slide .__icon-box-swiper-inner .__icon-box-swiper-icon{
    border-radius: 50%;
    border: 4px solid var(--kbs-black);
    padding: 0;
    font-size: 2em;
    line-height: 1;
    width: 1.75em;
    height: 1.75em;
    display: grid;
    place-content: center;
    background: var(--kbs-white);
    color: var(--kbs-black);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
#top .iconBoxSwiper .swiper-slide .__icon-box-swiper-text{font-size: var(--step--1);}


/* =======================================================================================================================================
Hero
======================================================================================================================================= */
#top .__hero{position: relative;}
#top .__hero::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 75%;
    width: 100%;
    height: 240px;
    background-color: var(--kbs-green);
    border-top-right-radius: .5em;
    border-top-left-radius: .5em;
    transform: var(--kbs-skew);
    pointer-events: none;
    z-index: 10;
}
#top .__hero .container .content{padding: 3em 0}
#top .__hero .container .flex_column:nth-child(1){margin-bottom: 4em !important; padding-top: 2em}
#top .__hero .container .flex_column:nth-child(2) .avia-image-container img{
    aspect-ratio: 4/3;
    object-fit: cover;
    max-width: 840px;
}
#top .__hero .container .flex_column:nth-child(2) .avia-image-container::after{
    content: '';
    position: absolute;
    top: -2em;
    right: 0;
    width: 240px;
    height: auto;
    max-width: 80%;
    aspect-ratio: 444 / 165;
    background-image: url(img/24h-express.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    visibility: visible;
}
#top .__hero h1{hyphens: auto;}
#top .__hero .avia-image-overlay-wrap .__circle-text{
    position: absolute;
    bottom: 35%;
    left: -5%;
}

@media only screen and (max-width: 989px){
    #top .__hero::after{height: 80px !important}
    #top .__hero .container .content{padding: 3em 0 0}
    #top .__hero .container .flex_column{margin: 0 !important}
    #top .__hero .container .flex_column:nth-child(2) .avia-image-container img{max-width: 100vw;}
    #top .__hero .container .flex_column:nth-child(2) .avia-image-container::after{width: 160px;}
}

#top.home .__hero::after{
    left: 48%;
    width: 720px;
    height: 160px;
}
#top.home .__hero .container::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 92%;
    width: 100%;
    height: clamp(30px, 8vw, 3em);
    background-color: var(--kbs-green);
    border-bottom-right-radius: .5em;
    transform: var(--kbs-skew) translate(0, 0);
    pointer-events: none;
}
#top.home .__hero .container .content:has(.avia-image-container){padding-bottom: 0;}


/* =======================================================================================================================================
Formular
======================================================================================================================================= */
#top .input-text, 
#top input[type=email], 
#top input[type=input], 
#top input[type=number], 
#top input[type=password], 
#top input[type=search], 
#top input[type=tel], 
#top input[type=text], 
#top input[type=url], 
#top select, 
#top textarea{
    font-family: var(--primary-font);
    padding: .6em 1em;
    border-radius: .5em;
    border: 2px solid;
    margin: 0;
    font-size: var(--step--1);
}

#top form label{
    font-size: var(--step--1);
    font-weight: 500;
}
#top form button{
	display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: var(--step-0);
    font-weight: 500;
    padding: .4em 1em;
    border-radius: .4em;
    background-color: var(--kbs-green);
    border-width: 2px !important;
    border-style: solid;
    border-color: var(--kbs-green);
    color: var(--kbs-black);
    text-decoration: none !important;
    transition: translate .2s ease, border-radius .4s ease;
    margin: 0 .4em .25em 0;
    box-shadow: none;
}
#top form button:hover{translate: 0 -2px; opacity: 1; border-radius: .6em;}

#top input::placeholder,
#top textarea::placeholder{
    opacity: 1; 
    font-size: var(--step--1);
    color: #999999;
}

#top .__background-green form button{border-color: currentColor;}

/* Formidable Forms */
#top .frm_forms > form{
    --section-color: currentColor;
}
#top .frm_forms > form .frm_primary_label{
	color: inherit;
	font-weight: 500;
    font-size: var(--step--1);
}
#top .frm_forms > form .frm_radio label{font-weight: 400;}
#top .frm_forms > form .frm_required{
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
#top .frm_forms > form .frm_opt_container{margin: .5em 0;}
#top .frm_forms > form p.description, 
#top .frm_forms > form div.description, 
#top .frm_forms > form div.frm_description, 
#top .frm_forms > form .frm-show-form > div.frm_description, 
#top .frm_forms > form .frm_error, 
#top .frm_forms > form .frm_pro_max_limit_desc{
	color: inherit;
	font-size: 14px;
}
#top .frm_forms > form .frm_error{margin: .5em 0 0;}
#top .frm_forms > form .frm_submit{text-align: center; margin: 1em 0 0;}
#top .frm_forms > form [aria-invalid="true"]{border-color: red !important;}


/* =======================================================================================================================================
Footer
======================================================================================================================================= */
#top #footer{
    padding: 8em 0 4em; 
    position: relative; 
    font-size: var(--step--1);
}
#top #footer p{
    font-size: var(--step--1);
    margin: .5em 0;
}
#top #footer a,
#top #socket a{transition: opacity .2s ease;}
#top #footer a:hover,
#top #socket a:hover{opacity: .5 !important;}

#top #footer .footer-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}
#top #footer .footer-bg::before{
    content: '';
    position: absolute;
    top: 1rem;
    right: -1rem;
    width: 200%;
    height: calc(100% - 1rem);
    background-color: var(--kbs-black);
    border-radius: 1em;
    pointer-events: none;
    transform: var(--kbs-skew);
}
#top #footer .container{
    display: flex;    
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2em; 
}
#top #footer .container::after,
#top #footer .container > .flex_column::before,
#top #footer .container > .flex_column::after{display: none}
#top #footer .container > .flex_column{width: 100%; margin: 0; float: none}
#top #footer .container > .flex_column > .widget{margin: 0; overflow: visible;}

#top #footer .container > .flex_column{display: flex; gap: 1em; flex-direction: column;}
#top #footer .container > .flex_column:nth-child(1) img.__logo{width: auto; height: 20px}
#top #footer .container > .flex_column:nth-child(1) .__skew-wrap{
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-end;
}
#top #footer .__skew-wrap span.__skew:nth-child(2){margin: -.25em -0.25em 0 0;}

#top #footer .container > .flex_column:nth-child(2) img.__by-ebg-metall{width: auto; height: 24px}

@media (min-width: 990px){
    #top #footer:before{right: 1rem}
    #top #footer .container > .flex_column:nth-child(1){justify-content: space-between; flex-direction: row; padding-right: 10%;}    
    #top #footer .container > .flex_column:nth-child(1) img.__logo{height: 60px}
    #top #footer .container > .flex_column:nth-child(2){flex-direction: row; align-items: flex-end;}    
    #top #footer .container > .flex_column:nth-child(2) > .widget{flex-basis: 0; flex-grow: 1; width: 100%}
    #top #footer .container > .flex_column:nth-child(2) img.__by-ebg-metall{height: 40px}
}




#socket{
    border-top: 2px solid var(--kbs-green); 
    font-size: var(--step--1);
}
#socket .container {
    padding-top: 1.5em;
    padding-bottom: 3em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em 6em;
    justify-content: space-between
}
#socket .container::after{display: none}
#socket .container .copyright{float: none}
#socket .container nav.sub_menu_socket{float: none; margin: 0}
#socket .container nav.sub_menu_socket div{overflow: visible}
#socket .container nav.sub_menu_socket ul.menu{margin: 0; display: flex; gap: 1em}
#socket .container nav.sub_menu_socket ul.menu li{float: none; line-height: inherit; padding: 0; border: 0}


#top #scroll-top-link{display: none}


/* =======================================================================================================================================
Google Reviews - Trustindex
======================================================================================================================================= */
@media (min-width: 990px){
    #top #trustindex-google-widget-html + div{
        position: fixed;
        bottom: 0;
        left: 1em;
        z-index: 1000;
        width: auto;
    }
}