/*
 Theme Name:   Nenninger
 Description:  Nenninger GmbH | WordPress Child Theme
 Author:       Neckarmedia
 Author URI:   https://www.neckarmedia.com
 Template:     enfold
 Version:      1.0
*/

@font-face {
  font-display: swap;
  font-family: 'Adria Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Adria_Grotesk_Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Adria Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Adria_Grotesk_Bold.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'TT Rounds';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/TT_Rounds_Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'TT Rounds';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/TT_Rounds_Bold.woff2') format('woff2');
}

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

:root {
  --step--2: clamp(0.8681rem, 0.9467rem + -0.0723vw, 0.9298rem);
  --step--1: clamp(1.0227rem, 1.0175rem + 0.0222vw, 1.0417rem);
  --step-0: clamp(1.125rem, 1.0907rem + 0.1465vw, 1.25rem);
  --step-1: clamp(1.2375rem, 1.1654rem + 0.3077vw, 1.5rem);
  --step-2: clamp(1.3613rem, 1.2407rem + 0.5143vw, 1.8rem);
  --step-3: clamp(1.4974rem, 1.3153rem + 0.7767vw, 2.16rem);
  --step-4: clamp(1.6471rem, 1.3875rem + 1.1076vw, 2.592rem);
  --step-5: clamp(1.8118rem, 1.4551rem + 1.5221vw, 3.1104rem);
  --step-6: clamp(1.993rem, 1.5151rem + 2.0389vw, 3.7325rem);
}

:root {
    --primary-font: 'Adria Grotesk', sans-serif;
    --heading-font: 'Adria Grotesk', sans-serif;
    --menu-font: 'TT Rounds', sans-serif;
    --primary-color: #002C5A;
    --secondary-color: #41BFE8;
    --tertiary-color: #4364AD;
    --accent-color: #FFE163;
    --light-color: #f0f5fb;
}


/* =======================================================================================================================================
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.6}
p{margin: 0 0 1.5em;}
h1,
.h1,
.h1 p,
h2,
.h2,
.h2 p,
h3,
.h3,
.h3 p,
h4, h5, h6{font-family: var(--heading-font); font-weight: 700 !important; line-height: 1; letter-spacing: 0 !important; text-transform: uppercase; margin: 0 0 .4em 0 !important; hyphens: auto; text-wrap: balance;}

#top .av-special-heading.p{margin: 0;}
#top .av-special-heading.p > .av-special-heading-tag{
    font-size: var(--step-0);
    font-weight: 400 !important;
    text-transform: inherit;
    margin: 0 0 1em 0 !important;
    line-height: 1.6;
}
#top h1, #top .h1, #top .h1 p{font-size: var(--step-5);}
#top h2, #top .h2, #top .h2 p{font-size: var(--step-5);}
#top h3, #top .h3, #top .h3 p{font-size: var(--step-3);}
#top h4{font-size: var(--step-2);}
#top h5{font-size: var(--step-1);}
#top h6{font-size: var(--step-0);}

#top .avia-section:not(.alternate_color):not(.footer_color) .h2 p{color: var(--primary-color);}

#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:not(:has(.av-subheading_below)) .av-special-heading-tag{margin: 0 !important}

#top .av-subheading_above p,
#top .av-subheading_below p{font-weight: 700; font-size: var(--step-1); margin: 0 0 1em; line-height: 1.3;}
#top .avia-section:not(.alternate_color):not(.footer_color) .av-subheading_above p,
#top .avia-section:not(.alternate_color):not(.footer_color) .av-subheading_below p{color: var(--secondary-color);}

#top .av-special-heading:has(.av-subheading_above):has(h1) .av-subheading p,
#top .av-special-heading:has(.av-subheading_above):has(h2) .av-subheading p{font-family: var(--heading-font); font-weight: 700 !important; line-height: 1; letter-spacing: 0 !important; text-transform: uppercase; margin: 0 0 .4em 0 !important; hyphens: auto; text-wrap: balance; font-size: var(--step-5);}
#top.home .av-special-heading:has(.av-subheading_above):has(h1) .av-subheading p{font-size: var(--step-6);}
#top .av-special-heading:has(.av-subheading_above):has(h1) .av-special-heading-tag,
#top .av-special-heading:has(.av-subheading_above):has(h2) .av-special-heading-tag{font-family: var(--primary-font); font-size: var(--step-1); font-weight: 700; line-height: 1.3; text-transform: inherit;}
#top .avia-section:not(.alternate_color):not(.footer_color) .av-special-heading:has(.av-subheading_above):has(h2) .av-special-heading-tag{color: var(--secondary-color);}
#top .avia-section:not(.alternate_color):not(.footer_color) .av-special-heading:has(.av-subheading_above):has(h2) .av-subheading_above p{color: var(--primary-color);}

#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}

#top mark{color: var(--secondary-color);}
#top p mark{font-size: var(--step-1); font-weight: 700; display: block;}

/* Button */
html #top .avia-button{
	font-family: var(--primary-font);
    font-size: var(--step-0);
    font-weight: 400;
    padding: .5em 1.75em;
    border-radius: 2em;
    background-color: var(--accent-color);
    border-width: 2px !important;
    border-style: solid;
    border-color: var(--accent-color);
    color: #000;
    text-decoration: none !important;
    transition: translate .2s ease;
    margin: 0 1em .5em 0;
}
html #top .avia-button.avia-color-theme-color{background-color: var(--accent-color); border-color: var(--accent-color); color: #000;}
html #top .avia-button.avia-color-white{background-color: #fff; border-color: #fff; color: #000;}
html #top .avia-button.avia-color-dark{background-color: transparent; border-color: var(--primary-color); color: var(--primary-color);}
html #top .avia-button.avia-color-light{background-color: transparent; border-color: #fff; color: #fff;}
html.no-touch-device #top div .avia-button:hover{translate: 0 -2px; opacity: 1;}

/* Blockquote */
#top blockquote{border: 0; font-size: var(--step-1); margin: 2em 0 2em; padding: 0 0 0 2em; position: relative; max-width: 420px; font-style: italic; line-height: 1.6}
#top blockquote:before{content: '\e833'; font-family: 'entypo-fontello'; position: absolute; top: -.3em; left: 0; opacity: .1; font-size: 4em; font-style: normal; line-height: 1}
#top blockquote p{font-size: 1em; margin: 0}

/* List */
#top .avia_textblock ul{
    list-style: none;
    margin: 0 0 1em 0;
}
#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: '\e875';
    font-family: 'entypo-fontello';
    position: absolute;
    left: 0;
    display: inline-block;
}


/* =======================================================================================================================================
Header
======================================================================================================================================= */
@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 .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;}
}

/* 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: 40px !important;}

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


/* =======================================================================================================================================
Accessibility / Barrierefreiheit
======================================================================================================================================= */
#top :focus-visible{
    outline: 0.2rem dashed var(--secondary-color) !important;
    outline-offset: .2rem !important;
}


/* =======================================================================================================================================
Misc
======================================================================================================================================= */
/* Layout */
.container_wrap{border: 0;}
.widgettitle{font-weight: inherit; text-transform: inherit; letter-spacing: inherit; font-size: inherit;}

#top .avia-section-default .content{padding-top: clamp(60px, 8vh, 80px); padding-bottom: clamp(60px, 8vh, 80px);}
#top .avia-section-huge .content{padding-top: clamp(80px, 12vh, 160px); padding-bottom: clamp(80px, 12vh, 160px);}

#top .avia-section.__gradient{background: linear-gradient(180deg, #41BFE8 0%, var(--tertiary-color) 56.73%);}

@media only screen and (max-width: 989px) {
    .responsive #top #wrap_all .av-break-at-tablet .flex_cell, 
    .responsive #top #wrap_all .flex_column.av-break-at-tablet{
        margin-bottom: 2em;
    }
    .responsive #top #wrap_all .av-break-at-tablet .flex_cell.avia-builder-el-last,
    .responsive #top #wrap_all .flex_column.av-break-at-tablet.avia-builder-el-last{
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 767px){
    .responsive #top #wrap_all .container{width: 90%; max-width: 90%;}
    #top .avia-section:not(.avia-section-no-padding) .content{padding-top: 60px; padding-bottom: 60px;}
}

/* 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-styling-{
    container-type: inline-size;
    margin-bottom: 2cqw;
    float: none;
}
#top .avia-image-container.av-styling- img{aspect-ratio: 1; object-fit: cover;}
#top .avia-image-container.av-styling-::after{
    content: '\e800';
    font-family: 'nenninger-icons';
    color: var(--accent-color);
    line-height: 1;
    display: block;
    position: absolute;
    bottom: -.3em;
    left: -.3em;
    font-size: 20cqw;
    pointer-events: none;
}
#top .avia-image-container.av-styling- .avia-image-overlay-wrap{border-radius: 1em; overflow: hidden; position: relative;}
#top .avia-image-container.av-styling- .avia-image-overlay-wrap::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 15%;
    height: 100%;
    background-color: var(--secondary-color);
    opacity: .8;
    pointer-events: none;
}

/* Hero */
#top .__hero{position: relative;}
#top .__hero::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(65, 191, 232, 0.90) 0%, rgba(67, 100, 173, 0.90) 56.73%);
}
#top .__hero .entry-content-wrapper{display: flex; gap: 2em 4em; flex-direction: column;}
#top .__hero .entry-content-wrapper::before,
#top .__hero .entry-content-wrapper::after{display: none;}
#top .__hero .entry-content-wrapper .flex_column{width: 100%; margin: 0 !important; float: unset;}

#top .__hero .avia-image-container.av-styling-{margin-bottom: 0;}
#top .__hero .avia-image-container.av-styling- .avia-image-overlay-wrap{border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
#top .__hero .avia-image-container.av-styling- .avia-image-overlay-wrap::after{display: none;}
#top .__hero .avia-image-container.av-styling-::after{
    content: '\e802';
    color: #fff;
    font-size: 54cqw;
    bottom: unset;
    left: unset;
    top: -22cqw;
    right: -24cqw;
}
#top .__hero .content{padding: 100px 0 0 0 !important;}

@media (max-width: 989px){
    #top .__hero .container{max-width: 100% !important; width: 100% !important; padding: 0;}
    #top .__hero .entry-content-wrapper .flex_column:nth-child(1){padding: 0 5%;}
    #top .__hero .avia-image-container.av-styling- .avia-image-overlay-wrap{border-radius: 0;}
    #top .__hero .avia-image-container.av-styling-::after{top: -8cqw;}
}

@media (min-width: 990px){
    #top .__hero .entry-content-wrapper{flex-direction: row;}
    #top .__hero .entry-content-wrapper .flex_column{flex-grow: 1; flex-basis: 0;}
    #top .__hero .entry-content-wrapper .flex_column:nth-child(1){align-self: center; padding: 2em 0;}
    #top .__hero .entry-content-wrapper .flex_column:nth-child(2){align-self: flex-end;}
    #top:not(.home) .__hero .entry-content-wrapper .flex_column:nth-child(1){flex-grow: 1.4;}
}

/* Toggle */
#top section.av_toggle_section .toggler{padding: 1em 3em 1em 1rem; margin: 0 0 .8em; font-size: var(--step-0); background: transparent; border: 1px solid; 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: '\e87d';
    font-family: 'entypo-fontello';
    position: absolute;
    right: 1em;
    transition: .2s ease;
}
#top section.av_toggle_section .toggler.activeTitle:after{rotate: 90deg}
#top section.av_toggle_section .toggle_content{border: 0; background: transparent; padding: .5em 1rem 1.5em;}
#top section.av_toggle_section .toggle_content *{font-size: var(--step--1);}

/* Social Icons */
#top ul.__social--media--icons{
    display: flex;
    gap: 0;
    font-size: var(--step-3);
    margin: 0 0 1em 0;
    line-height: 1;
	padding: 1em 0;
}
#top ul.__social--media--icons > li > a{padding: 0.2em 0.8em 0.2em 0; font-size: 2.5em !important;}
#top #wrap_all .__social--media--icons li a:focus,
#top #wrap_all .__social--media--icons li:hover a{background-color: var(--primary-color) !important; color: white}

/* USP */
#top ul.__icon--text--list{
    list-style: none;
    margin: 1em 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em 4em;
}
#top ul.__icon--text--list li{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75em;
    align-items: center;
    text-align: center;
}
#top ul.__icon--text--list li i{
    display: grid;
    place-content: center;
    font-size: var(--step-6);
    line-height: 1;
    height: 1.75em;
    width: 1.75em;
    border-radius: 50%;
    color: #fff;
    background: var(--primary-color);   
}
#top ul.__icon--text--list li p{line-height: 1.3;}
#top ul.__icon--text--list li p strong{display: block; max-width: 220px;}

/* Section Block Grid*/
#top .__section--box--grid{container-type: inline-size;}
#top .__section--box--grid .entry-content-wrapper::before,
#top .__section--box--grid .entry-content-wrapper::after{display: none;}
#top .__section--box--grid .entry-content-wrapper{
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 1em;
}
#top .__section--box--grid .entry-content-wrapper .flex_column{
    width: 100%;
    margin: 0;
    grid-column: span 6;
    border: 1px solid var(--secondary-color);
    padding: 2em 1.5em 1em;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    height: 100%;
}
#top .__section--box--grid .entry-content-wrapper .flex_column > *{margin: 0; max-width: 100%;}
#top .__section--box--grid .entry-content-wrapper .flex_column:nth-child(1){grid-column: span 8;}
#top .__section--box--grid .entry-content-wrapper .flex_column:nth-child(2),
#top .__section--box--grid .entry-content-wrapper .flex_column:nth-child(3){grid-column: span 5;}
#top .__section--box--grid .entry-content-wrapper .flex_column .av_textblock_section:nth-of-type(2){margin-top: auto; padding-top: 2em; text-align: right;}

#top .__section--box--grid .entry-content-wrapper .flex_column .avia-button-wrap{
    padding-top: 1em; 
    margin-top: auto; 
}
#top .__section--box--grid .entry-content-wrapper .flex_column .avia-button-wrap .avia-button{
    color: var(--accent-color); 
    padding: 0; 
    background: transparent; 
    border: 0;
    float: none;
    display: inline-block;
}
#top .__section--box--grid .entry-content-wrapper .flex_column .avia-button-right{text-align: right;}
#top .__section--box--grid .entry-content-wrapper .flex_column .avia-button-wrap .avia-button::before{
    content: '\e800';
    font-family: 'nenninger-icons';
    margin: 0 0.75em 0 0;
}

@container (max-width: 1279px) {
    #top .__section--box--grid .entry-content-wrapper .flex_column{
        grid-column: span 9 !important;
    }
}
@container (max-width: 767px) {
    #top .__section--box--grid .entry-content-wrapper .flex_column{
        grid-column: span 18 !important;
    }
}

/* Icon List small */
#top ul.av-iconlist-small{
    display: flex;
    flex-direction: column;
    gap: .75em;
    font-size: var(--step-0);
}
#top ul.av-iconlist-small li{
    max-width: 100%;
    display: flex;
    gap: .75em;
    align-items: flex-start;
    line-height: 1.6;
}
#top ul.av-iconlist-small li .iconlist_icon{
    background: transparent;
    color: var(--secondary-color);
    height: unset;
    width: unset;
    line-height: 1;
    font-size: 1.5em;
    margin: 0;
}
#top ul.av-iconlist-small li .iconlist_icon .av-icon-char{color: var(--secondary-color);}
#top ul.av-iconlist-small li .av_iconlist_title{text-transform: uppercase; font-weight: 700;}
#top ul.av-iconlist-small li .iconlist_content p{font-size: var(--step--1);}
#top .main_color ul.av-iconlist-small li .av_iconlist_title{color: var(--primary-color);}

#top .__benefits ul.av-iconlist-small li .av_iconlist_title{text-transform: none; font-size: var(--step-0); font-weight: 400 !important;}

/* Icon List --> Big */
#top ul.av-iconlist-big{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 1.75em;
}
#top ul.av-iconlist-big > li{
    display: flex; 
    gap: 1.75em;
    padding: 0;
}

#top .avia-icon-list .iconlist_icon{line-height: inherit;}
#top .alternate_color .avia-icon-list .iconlist_icon {background-color: transparent; color: var(--secondary-color);}
#top .avia-icon-list .iconlist_icon{margin-right: 0;}
#top ul.av-iconlist-big .iconlist-timeline{display: none;}

/* Timeline */
#top ul.avia-timeline li h2{font-size: var(--step-1);}
#top ul.avia-timeline li .av-milestone-icon-inner{background-color: var(--tertiary-color);}
#top ul.avia-timeline li .av-milestone-icon-wrap:after{border-color: var(--tertiary-color);}
#top ul.avia-timeline li .av-milestone-date span{background-color: var(--tertiary-color);}

#top .alternate_color ul.avia-timeline li h2{color: var(--accent-color);}

@media only screen and (max-width: 989px){
    #top ul.avia-timeline li{display: flex; flex-direction: column;} 
    #top ul.avia-timeline li > *{order: 2;} 
    #top ul.avia-timeline li > h2{order: 1; display: block; margin: 0 !important;}
}

@media (min-width: 768px){
    #top ul.avia-timeline li i.milestone-char{scale: 1.5; display: block;}
}

/* Hersteller Logos */
#top .swiperHerstellerLogos	.swiper-slide{
    display: grid;
    place-content: center;
    place-items: center;
    max-width: 75%;
    padding: 2.5em 10%;
    background: #fff;
    border-radius: 1em;
    border: 1px solid var(--secondary-color);
    height: auto;
}
#top .swiperHerstellerLogos	.swiper-slide img{
    width: 100%;
    max-width: 240px;
    height: auto;
    max-height: 54px;
}

@media (max-width: 767px) {
	#top .swiperHerstellerLogos .swiper-slide{
		width: auto;
	}
}

@media (min-width: 768px){
	#top .swiperHerstellerLogos .swiper-wrapper{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 1em;
        transform: inherit !important;
	}
	#top .swiperHerstellerLogos .swiper-slide{
		grid-column: span 3;
        max-width: 100%;
        margin: 0 !important;
	}
	#top .swiperHerstellerLogos .swiper-slide:nth-child(-n + 3){
		grid-column: span 4;
	}
}


/* =======================================================================================================================================
Blog / News
======================================================================================================================================= */
/* Archive */
#top .bloglist-excerpt .more-link{border-color: var(--accent-color); background-color: var(--accent-color)}
#top .bloglist-excerpt .read-more-link:after{border-color: var(--accent-color)}

/* Single Post */
#top .container_wrap .template-blog.av-alb-blogposts article.post .entry-content-wrapper{font-size: var(--step-0); text-align: left; line-height: 1.6;}
#top .container_wrap .template-blog.av-alb-blogposts article.post header{margin: 0 0 1em 0;}
#top .container_wrap .template-blog.av-alb-blogposts article.post header .post-meta-infos{font-size: var(--step--1);}
#top .container_wrap .template-blog.av-alb-blogposts article.post .post-title{font-size: var(--step-2); padding: 0; text-transform: uppercase; font-weight: 700; line-height: 1.2; margin: 0 0 .5em 0;}

#top .container_wrap .template-single-blog article.post .big-preview{max-width: 720px; margin: auto;}
#top .container_wrap .template-single-blog article.post .entry-content-wrapper header{margin: 0 0 1em 0; padding: 0;}
#top .container_wrap .template-single-blog article.post .entry-content-wrapper header .post-meta-infos{text-align: left; font-size: var(--step--1);}
#top .container_wrap .template-single-blog article.post .entry-content-wrapper{max-width: 720px; text-align: left; line-height: 1.6; font-size: var(--step-0);}
#top .container_wrap .template-single-blog article.post .entry-content-wrapper h1{text-align: left; font-size: var(--step-3); padding: 1rem 0; line-height: 1;}
#top .container_wrap .template-single-blog article.post .entry-content-wrapper h2{font-size: var(--step-2);}
#top .container_wrap .template-single-blog article.post .entry-content-wrapper h3{font-size: var(--step-1);}
#top .container_wrap .template-single-blog article.post .entry-content-wrapper h4,
#top .container_wrap .template-single-blog article.post .entry-content-wrapper h5,
#top .container_wrap .template-single-blog article.post .entry-content-wrapper h6{font-size: var(--step-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: 1em;
    border-radius: .5em !important;
    border: 1px solid;
    margin: 0;
    font-size: var(--step--1);
}

#top form label{font-size: var(--step--1)}
#top form button{
	font-family: var(--primary-font);
    font-size: var(--step-0);
    font-weight: 400;
    padding: .5em 1.75em;
    border-radius: 2em;
    background-color: var(--accent-color);
    border-width: 2px !important;
    border-style: solid;
    border-color: var(--accent-color);
    color: #000;
    text-decoration: none !important;
    transition: translate .2s ease;
    margin: 0 1em .5em 0;
}

#top .alternate_color form button{
	background: var(--enfold-alternate-color-color);
    color: var(--enfold-alternate-color-bg);
}

#top form .frm_upload_text button{border: 0}


/* Formidable Forms */
#top .frm_forms > form .frm_primary_label{
	color: inherit;
	font-weight: 700;
}
#top .frm_forms > form .frm_required{
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
#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: var(--step--1);
}

#top .frm_forms h3.frm_pos_top{
	padding: 0 0 2rem 0;
	border: 0;
}

#top #frm_field_27_container input[type=text]{background-color: var(--primary-color); color: var(--secondary-color); border-style: solid; border-color: var(--secondary-color); padding: .57em 1em;}
#top .frm_forms > form #frm_field_27_container .frm_primary_label{color: var(--primary-color)}

#top .frm_forms .frm_checkbox label{font-weight: 400;}

#top .frm_forms #field_wfr5a_label{padding-bottom: .5em; font-size: var(--step--1);}


/* =======================================================================================================================================
Ersatzteilkatalog ETK
======================================================================================================================================= */
#top .__template--etk--single--top{min-height: 0;}
#top .__template--etk--single--top .container{
    padding: 0;
    width: 100% !important;
    max-width: 100% !important;
}
#top .__template--etk--single--top .content{
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
#top .__template--etk--single--top .content p{margin: 0; padding: 1em 5%; font-size: var(--step--1);}
#top .__template--etk--single--top .content p:nth-child(1){
    background-color: var(--accent-color); 
    color: var(--primary-color);
    white-space: nowrap;
}

@media only screen and (min-width: 768px){
    #top .__template--etk--single--top .content{flex-direction: row;}
    #top .__template--etk--single--top .content p{padding: .5em 50px;}
}

@media only screen and (min-width: 1740px){
    #top .__template--etk--single--top .content p{padding: .5em 2em;}
    #top .__template--etk--single--top .content p:nth-child(1){padding-left: calc((100vw - 1640px) / 2);}
}



#top .__template--etk--single--product{
    background-color: #f2f4f7;
}

#top .__template--etk--single--product .container{max-width: 1360px;}

#top .__template--etk--single--product .content{
    display: flex;
    flex-wrap: wrap;
    gap: 2em 1em;
    align-items: flex-start;
}
#top .__template--etk--single--product .content > .__back .avia-button{
    margin: 0;
    font-size: var(--step--1);
    padding: .5em 1em;
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
#top .__template--etk--single--product .content > .__back .avia-button i{
    font-size: var(--step--2);
    rotate: -135deg;
    display: inline-block;
}

#top .__template--etk--single--product .content > .__search{flex-basis: 100%;}
#top .__template--etk--single--product .content > .__search form.etk-search-form{margin: 0;}
#top .__template--etk--single--product .content > .__search form.etk-search-form button{display: none;}

#top .__template--etk--single--product .content > section,
#top .__template--etk--single--product .content > aside{
    background-color: #fff;
    padding: 2em;
    flex-grow: 1;
    flex-basis: 0;
    border-radius: .5em;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 2px 4px -1px rgba(17, 18, 19, .06), 0 1px 2px 0 rgba(17, 18, 19, .08) !important;
}
#top .__template--etk--single--product .content > section{
    flex-grow: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
#top .__template--etk--single--product .content > section h1{
    font-size: var(--step-1);
    font-weight: 400 !important;
}
#top .__template--etk--single--product .content > section figure{
    border: 1px solid #00000017;
    border-radius: .5em;
    overflow: hidden;
    display: block;
    padding: 2em;
}
#top .__template--etk--single--product .content > section figure img{display: block;}



#top .__template--etk--single--product .content > aside{
    text-align: right;
}
#top .__template--etk--single--product .content > aside small{
    font-size: var(--step--2);
    display: block;
    line-height: 1.2;
}
#top .__template--etk--single--product .content > aside .__info{
    padding: 0 0 .5em 0;
    margin: 0 0 .5em 0;
    border-bottom: 1px solid #00000017;
}
#top .__template--etk--single--product .content > aside .__preis p{
    margin: 0;
    font-size: var(--step-2);
}
#top .__template--etk--single--product .content > aside .__button .avia-button{
    margin: 1em 0 0;
    width: 100%;
    cursor: pointer;
}

@media only screen and (max-width: 989px){
    #top .__template--etk--single--product .content{
        flex-direction: column;
        align-items: stretch;
    }
}

#top .etk-search-wrapper{
    --etk-search-gap: 0;
    --etk-input-padding: 0.6em 0.8em;
    --etk-input-font-size: inherit;
    --etk-input-bg: #fff;
    --etk-input-color: inherit;
    --etk-input-border: 1px solid #ccc;
    --etk-input-radius: 0;
    --etk-input-focus-border-color: currentColor;
    --etk-button-padding: 0.6em 1.2em;
    --etk-button-font-size: inherit;
    --etk-button-bg: #333;
    --etk-button-color: #fff;
    --etk-button-border: 1px solid #333;
    --etk-button-radius: 0;
    --etk-button-hover-bg: #555;
    --etk-button-hover-border: 1px solid #555;
    --etk-results-bg: #fff;
    --etk-results-border: 0;
    --etk-results-radius: 0.5em;
    --etk-results-shadow: 0 16px 32px rgb(0 0 0 / 10%);
    --etk-results-max-height: 400px;
    --etk-item-padding: 1em;
    --etk-item-border-bottom: 1px dashed #dedede;
    --etk-item-hover-bg: var(--light-color);
    --etk-item-active-bg: #f0f0f0;
    --etk-text-color: #000;
    --etk-meta-color: #666;
    --etk-meta-font-size: 0.85em;
    --etk-highlight-weight: 700;
    --etk-no-results-color: #000;
    --etk-focus-outline: 2px solid currentColor;
    --etk-focus-outline-offset: -2px;
}

#top .avia-section:has(form.etk-search-form){
    position: relative;
    z-index: 10;
}
#top form.etk-search-form{margin: 0;}
#top form.etk-search-form .etk-search-input-wrapper{
    display: flex;
    align-items: center;
    gap: 1em;
}
#top form.etk-search-form .etk-search-input-wrapper .etk-search-input{
    font-size: var(--step-0);
    font-weight: 400;
    padding: .75em 1em;
    line-height: 1.2;
    border-radius: 2em;
}
#top form.etk-search-form .etk-search-input-wrapper .etk-search-button{
    font-size: var(--step-0);
    font-weight: 400;
    padding: .5em 1.75em;
    border-radius: 2em;
    background-color: var(--accent-color);
    border-width: 2px !important;
    border-style: solid;
    border-color: var(--accent-color);
    color: #000;
    text-decoration: none !important;
    margin: 0;
    line-height: 1.2;
    display: none;
}
#top form.etk-search-form .etk-search-results{top: calc(100% + 8px);}
#top form.etk-search-form .etk-search-results .etk-search-result-item{transition: background-color .2s; border-bottom: var(--etk-item-border-bottom);}
#top form.etk-search-form .etk-search-no-results{padding: 2em; text-align: left;}
#top form.etk-search-form .etk-search-result-meta{
    background: var(--accent-color);
    color: var(--primary-color);
    display: inline-block;
    font-size: var(--step--2);
    line-height: 1.2;
    padding: .2em .4em;
    border-radius: .2em;
}
#top form.etk-search-form .etk-search-no-results{
    padding: 2em; 
    text-align: left; 
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    gap: 1em;
}
#top form.etk-search-form .etk-search-no-results p{margin: 0}
#top form.etk-search-form .etk-search-no-results p small{display: block; font-size: var(--step--1); line-height: 1.2; opacity: .5; margin-top: .5em;}
#top form.etk-search-form .etk-search-no-results button{background-color: var(--accent-color); cursor: pointer;}


/* =======================================================================================================================================
Overlay Sidebar
======================================================================================================================================= */
.overlay-sidebar-wrap{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    isolation: isolate;
    background: #00000060;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    inset-inline-start: 0;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.overlay-sidebar-wrap.is-active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .overlay-sidebar-wrap{
        transition: none;
    }
}

html:has(body.overlay-sidebar-open){overflow: hidden;}

#overlay-sidebar{
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    max-width: 100vw;
    width: 100%;
    max-width: 900px;
    height: 100%;
    z-index: 2000;
    line-height: 1;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
#overlay-sidebar.is-active{
    pointer-events: auto;
    transform: translateX(0);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
}
#overlay-sidebar button.__overlay-sidebar-close{
    all: unset;
    cursor: pointer;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-content: center;
    border-radius: .5rem;
    transition: background-color .2s;
	background-color: transparent;
}
#overlay-sidebar button.__overlay-sidebar-close:hover svg path{
    fill: var(--accent-color);
}
#overlay-sidebar button.__overlay-sidebar-close svg{
    width: 1.5rem;
    height: 1.5rem;
}

#overlay-sidebar button.__overlay-sidebar-close svg path{fill: var(--secondary-color);}

#overlay-sidebar > header{
    background-color: var(--primary-color);
    padding: 2em;
    display: flex;
    gap: 1em;
    justify-content: flex-end;
}
#overlay-sidebar > .__wrap{
    padding: 2em;
    overflow: auto;
    overscroll-behavior: contain;
}
#overlay-sidebar > .__wrap p{
    margin-top: 0;
}
#overlay-sidebar > .__wrap .widget{
    padding: 0 0 2em 0;
}
#overlay-sidebar > .__wrap .widget::after,
#overlay-sidebar > .__wrap .widget::before{display: none;}

@media (prefers-reduced-motion: reduce) {
    #overlay-sidebar{
        transition: none;
    }
}

@media screen and (max-width: 767px){
    #overlay-sidebar > header{padding: 1em;}
    #overlay-sidebar > .__wrap{padding: 2em 1em;}
    #overlay-sidebar button.__overlay-sidebar-close{font-size: var(--step-5);}
}


/* =======================================================================================================================================
Footer
======================================================================================================================================= */
#footer{padding: 5em 0; border: 0; position: relative;}
#footer::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 80%;
    background-color: var(--accent-color);
}
#footer .widget{margin: 0 !important; overflow: visible;}
#footer .container::before,
#footer .container::after{display: none;}
#footer .container{
    display: flex; 
    flex-wrap: wrap; 
    gap: 2em; 
}
#footer .container > .flex_column{width: 100%; margin: 0 !important;}
#footer .textwidget > p:last-child{margin-bottom: 0;}

#footer .container > .flex_column:nth-child(1) img{margin: 0 0 2em 0; width: auto; height: 40px !important;}

#footer .container > .flex_column:nth-child(3) *{font-size: var(--step--1)}
#footer .widget_nav_menu ul.menu{margin: 0 0 2em 0;}
#footer .widget_nav_menu ul.menu li{font-size: 1em;}
#footer .widget_nav_menu ul.menu li a{padding: 0;}

@media only screen and (min-width: 1280px){
    #footer .container{align-items: flex-end;}
    #footer .container > .flex_column{width: auto; flex-basis: 0; flex-grow: 1;}
    #footer .container > .flex_column:nth-child(2){flex-grow: 2;}
}

@media only screen and (min-width: 1440px){
    #footer .container > .flex_column:nth-child(1) img{height: 64px !important;}
}

#socket{font-size: var(--step--1);}
#socket .container{padding-top: 1rem; padding-bottom: 4rem;}


#scroll-top-link{
    opacity: 1 !important;
    border: 0 !important;
    border-radius: 50%;
    background: var(--accent-color);
    right: 28px;
}
#scroll-top-link:before{
    content: '\e800';
    font-family: 'nenninger-icons';
    rotate: -45deg;
    display: block;
}
#scroll-top-link svg{
    display: none;
}


/* =======================================================================================================================================
Floating Contact Widget
======================================================================================================================================= */
#top .fcw-wrapper {
    position: fixed;
    bottom: 120px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media only screen and (max-width: 767px) {
    #top .fcw-wrapper{bottom: 40px;}
}

#top .fcw-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: transform 0.25s ease, background 0.25s ease;
    position: relative;
}

#top .fcw-button:hover {
    transform: scale(1.06);
    background: var(--secondary-color);
}

#top .fcw-button svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    transition: transform 0.3s ease;
}

#top .fcw-wrapper.open .fcw-button svg.icon-chat {
    display: none;
}
#top .fcw-wrapper:not(.open) .fcw-button svg.icon-close {
    display: none;
}

/* kleiner Puls-Ring, der dezent zeigt: hier klicken */
#top .fcw-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--secondary-color);
    animation: fcw-pulse 2.4s ease-out infinite;
}

@keyframes fcw-pulse {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

#top .fcw-wrapper.open .fcw-button::after {
    animation: none;
    opacity: 0;
}

/* Panel */
#top .fcw-panel {
    width: 0;
    height: 0;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    overflow: hidden;
    pointer-events: none;

    /* Animation: standardmäßig versteckt */
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
    transform-origin: bottom right;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

#top .fcw-wrapper.open .fcw-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    width: 280px;
    height: auto;
}

#top .fcw-panel *{
    font-size: var(--step--1);
}

#top .fcw-panel-header {
    background: var(--primary-color);
    padding: 20px 18px 60px;
    position: relative;
    color: #fff;
}

#top .fcw-panel-header p {
    margin: 0;
}

#top .fcw-avatar {
    position: absolute;
    bottom: -40px;
    left: 18px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    overflow: hidden;
    background: var(--accent-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#top .fcw-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#top .fcw-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #3ad08a;
    border: 2px solid #fff;
    border-radius: 50%;
}

#top .fcw-panel-body {
    padding: 54px 18px 18px;
}

#top .fcw-panel-body p.fcw-text {
    margin: 0 0 16px;
    font-size: var(--step--1);
    line-height: 1.5;
}

#top .fcw-contact-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    color: var(--primary-color);
}

#top .fcw-contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

#top .fcw-contact-list a {
    color: var(--primary-color);
    text-decoration: none;
}

#top .fcw-contact-list a:hover {
    color: var(--secondary-color);
}

#top .fcw-contact-list svg {
    width: 16px;
    height: 16px;
    fill: var(--secondary-color);
    flex-shrink: 0;
}

#top.page-kontakt .fcw-wrapper{
    display: none;
}