/*
 Theme Name:   FRANK Werbung
 Description:  FRANK Werbung | WordPress Child Theme
 Author:       PS-Werbestars
 Template:     enfold
 Version:      1.0
*/

@font-face {
  font-display: swap;
  font-family: 'RockwellMT-Bold';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/3726ED_0_0.woff2') format('woff2');
}

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


/* @link https://utopia.fyi/type/calculator?c=375,18,1.2,1920,22,1.333,6,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(0.9375rem, 0.9147rem + 0.0974vw, 1.0315rem);
  --step-0: clamp(1.125rem, 1.0643rem + 0.2589vw, 1.375rem);
  --step-1: clamp(1.35rem, 1.2328rem + 0.5001vw, 1.8329rem);
  --step-2: clamp(1.62rem, 1.4202rem + 0.8525vw, 2.4432rem);
  --step-3: clamp(1.944rem, 1.6254rem + 1.3595vw, 3.2568rem);
  --step-4: clamp(2.3328rem, 1.8453rem + 2.08vw, 4.3413rem);
  --step-5: clamp(2.7994rem, 2.0742rem + 3.094vw, 5.787rem);
  --step-6: clamp(3.3592rem, 2.3022rem + 4.5099vw, 7.7141rem);
}

/* Global */
:root{
    --red: #D4112B;
    --grey: #f6eff0;
}

:root {
    --primary-font: 'RockwellMT', sans-serif;
    --heading-font: 'RockwellMT-Bold', sans-serif;
}


/* =======================================================================================================================================
Typo
======================================================================================================================================= */
html{-webkit-tap-highlight-color: transparent;}
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
body,p{font-family: var(--primary-font); font-weight: 400; line-height: 1.5; font-size: var(--step-0);}
b,strong{color: inherit !important;}
h1,h2,h3,h4,h5,h6{font-family: var(--heading-font); font-weight: 700 !important; text-transform: inherit !important; line-height: 1.2; letter-spacing: 0 !important; margin: 0 0 0.5em !important; position: relative; hyphens: auto}
::selection{background-color: var(--red); color: #fff;}

#top h1{font-size: var(--step-4)}
#top h1 small{display: block; font-size: .5em;}
#top h2{font-size: var(--step-3)}
#top h3{font-size: var(--step-1)}
#top h4{font-size: var(--step-0)}

#top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;}
#top .special-heading-border{display: none;}
#top .av-special-heading .av-special-heading-tag:has(+ .av-subheading_below){margin-bottom: 0 !important;}
#top .av-special-heading .av-subheading_above p{font-style: italic; color: var(--red);}
#top .av-special-heading .av-subheading_above p::after{
        content: '';
        width: 160px;
        height: 8px;
		display: block;
		margin: .5em 0;
        background: linear-gradient(to bottom, var(--enfold-footer-color-border) 0%, var(--enfold-footer-color-border) 20%, transparent 20%, transparent 60%, var(--enfold-footer-color-border) 60%, var(--enfold-footer-color-border) 100%);
    }

#top p a{text-decoration: underline; text-underline-offset: 4px;}

@media (max-width: 767px){
	h1,h2,h3,h4,h5,h6{hyphens: auto}
}

/* Button */
#top div .avia-button{
	padding: .5em 2em;
    line-height: 1.2;
    font-weight: 700;
    font-size: var(--step-0);
    background-color: var(--red) !important;
    border-width: 2px;
    border-style: solid;
    border-color: var(--red) !important;
    border-radius: 0;
    color: #fff !important;
    transition: .2s ease;
}
#top div .avia-button.avia-color-light{color: #fff !important; border-color: #fff !important; background: transparent !important;}
#top div .avia-button.avia-color-dark{color: var(--red) !important; border-color: var(--red) !important; background-color: transparent !important;}
#top div .avia-button:hover{opacity: 1; box-shadow: 0 2px 12px rgb(0 0 0 / 25%);}


/* =======================================================================================================================================
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: 1rem;
    }
    #header .inner-container > .logo{order: 1; margin-right: auto; position: relative;}
    #header .inner-container > nav{order: 3; position: relative;}
}


/* Meta Header */
#header_meta{border: 0; background: #000; padding-right: 1em}
#header_meta *{color: #fff}
#header_meta .phone-info{width: 100%; padding: .4rem 0; line-height: 1.2; font-size: var(--step--1); font-weight: 400;}
#header_meta .phone-info > div{line-height: 30px; width: 100%;}
#header_meta .phone-info a{color: #fff}
#header_meta .phone-info ul{margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2rem}
#header_meta .phone-info ul li{display: inline-block;}
#header_meta .phone-info ul li:before{content: '\e875'; font-family: 'entypo-fontello'; margin-right: .8em;}
#header_meta .phone-info ul li.__tel:before{content: '\e854'}
#header_meta .phone-info ul li.__email:before{content: '\e805'}
#header_meta .phone-info ul li.__location:before{content: '\e842'}


@media only screen and (max-width: 990px){
    #header_meta{min-height: 5px}
    #header_meta .container{display: none;}
}

@media only screen and (min-width: 990px){
    #top #wrap_all #main{padding-top: 153px !important}
}

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

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

/* Navigation */
@media only screen and (min-width: 990px){
	#header_main .inner-container > nav{display: flex; align-items: center;}
	#header_main .inner-container > nav > div,
	#header_main .inner-container > nav > div > ul,
	#header_main .inner-container > nav > div > ul > li{height: 100%}
	#header_main .inner-container > nav > div > ul > li.menu-item{display: flex; align-items: center}
	#header_main .inner-container > nav ul#avia-menu > li > a{line-height: 1.6 !important; height: auto !important; font-size: var(--step-0); font-weight: 400}
    #header_main .inner-container > nav ul#avia-menu > li li > a{font-size: var(--step--1); font-weight: 400}
    #header_main .inner-container > nav ul#avia-menu li:hover > a > .avia-menu-text,
    #header_main .inner-container > nav ul#avia-menu li.current-menu-item > a > .avia-menu-text{opacity: 1}
	#header_main .inner-container > nav.main_menu ul#avia-menu > li.av-menu-button-colored > a .avia-menu-text{
		background-color: var(--red);
        color: var(--red);
        border-color: var(--red);
        border-radius: .5rem;
        padding: .5em;
        font-weight: 700;
        line-height: 1.2;
        display: inline-block;
	}
}

/* Burger menu */
.av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after{border-radius: 0;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul{background: var(--red); vertical-align: top;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a{border-color: #414b52; color: #fff; font-size: var(--step-2); border: 0}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a{padding: .5em 1em .5em 70px; font-size: var(--step-1);}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a .avia-bullet{background-color: var(--grey);}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a:hover{background: transparent !important;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a img{display: none;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li.av-menu-button-colored > a .avia-menu-text{background-color: var(--red); color: var(--red); border-color: var(--red); border-radius: .5em; font-weight: 700; display: block;}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li.aside_cta_trigger{display: none}

.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, 
.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, 
.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after{background-color: #fff;}

/* Breadcrumbs */
#top .title_container{background: var(--grey); box-shadow: 0 0 5px rgb(0 0 0 / 20%), 0 0 25px rgb(0 0 0 / 20%);}
#top .title_container *{color: var(--red); font-size: var(--step--1);}
#top .title_container .breadcrumb{right: inherit;}
#top .title_container .breadcrumb .trail{display: -webkit-box;display: -ms-flexbox;display: flex;}
#top .title_container .breadcrumb .breadcrumb-trail{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#top .title_container .breadcrumb .breadcrumb-trail:before{font-family: 'entypo-fontello'; content: '\e821'; margin-right: 10px}
#top .title_container .breadcrumb .sep{margin: 0 .5em;}
#top .title_container .breadcrumb .trail-end{opacity: .5}


/* =======================================================================================================================================
Accessibility
======================================================================================================================================= */
#top :focus-visible{
    overflow: visible; 
    outline: -webkit-focus-ring-color auto 1px; 
    opacity: 1 !important;
	box-shadow: inset 0 0 0 2px #fff;
}


/* =======================================================================================================================================
Misc
======================================================================================================================================= */
/* Layout */
#top .container_wrap{border: 0}

#top .__section--full{min-height: unset; padding: 4vh 0 2vh}
#top .__section--full .container,
#top .__section--full .container .content{max-width: 100% !important; width: 100% !important; padding: 0 !important}

@media only screen and (max-width: 767px){
	.avia-section .content{padding-top: 50px !important; padding-bottom: 50px !important}
}

@media only screen and (min-width: 990px){
    html, body, #wrap_all{overflow: initial !important;}
    #top .__sticky{position: sticky !important; top: 180px}
}

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

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

/* Hero  */
#top .__hero .__title p{
    font-family: var(--heading-font);
    line-height: 1;
    font-size: var(--step-6);
    margin: 0;
}

/* Portfolio Video Section */
#top.single-portfolio #main > .av-section-with-video-bg .container{height: 25vh}
#top.single-portfolio #main > .av-section-with-video-bg .avia-divider-svg-bottom svg{height: clamp(20px, 5vw, 50px);}
#top.single-portfolio #main > .av-section-with-video-bg:first-of-type .av-section-color-overlay{
	animation: animateOverlay 4s;
	opacity: .5;
}

@keyframes animateOverlay{
	0%  {opacity: 1}
	25% {opacity: 1}
	50% {opacity: .9}
	75% {opacity: .6}
	100%{opacity: .5}
}

/* Promobox */
#top .av_promobox{
    border: none;
    max-width: 1280px;
    margin: auto;
    float: unset;
    padding: 1em;
    font-size: var(--step-2);
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
#top .av_promobox *{margin: 0; float: none; position: relative; top: inherit; right: inherit;}
#top .av_promobox .avia-promocontent p{
    font-size: 1em;
    margin: 0;
}

/* Masonry */
#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title{font-family: 'Times New Roman'; font-weight: 300; font-style: italic;}

.avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
            -webkit-animation: avia_msonry_show 1s 1 cubic-bezier(0.46, 0.03, 0.52, 0.96);
                    animation: avia_msonry_show 1s 1 cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

@-webkit-keyframes avia_msonry_show {
  0%   { -webkit-transform:translateZ(0px) translateY(100px) rotateX(0deg); transform:translateZ(0px) translateY(100px) rotateX(0deg); opacity: 0;  }
  100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
}
@keyframes avia_msonry_show {
  0%   { -webkit-transform:translateZ(0px) translateY(100px) rotateX(0deg); transform:translateZ(0px) translateY(100px) rotateX(0deg); opacity: 0;  }
  100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1;  }
}


/* =======================================================================================================================================
Formular
======================================================================================================================================= */
#top .input-text, 
#top input[type="text"], 
#top input[type="input"], 
#top input[type="password"], 
#top input[type="email"], 
#top input[type="number"], 
#top input[type="url"], 
#top input[type="tel"], 
#top input[type="search"], 
#top textarea, 
#top select{
	padding: .75em;
	line-height: 1.2;
    font-size: var(--step-0);
	font-family: var(--primary-font) !important;
	border-radius: .25em;
}

#top label,
#top legend{
    font-weight: 700;
    font-size: var(--step--1);
}
#top label span, 
#top legend span{
	font-size: var(--step--1);
	color: inherit;
}

/* CF7 */
.wpcf7-form{clear: both}
.wpcf7 form .wpcf7-response-output{margin: 1em 0; border: 0 !important; padding: 1em;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{background: #d4112b1c}
.wpcf7 form.sent .wpcf7-response-output{background: #46b4502e; color: #2f7e36;}
.wpcf7 .wpcf7-not-valid{border-color: red !important}
.wpcf7 .wpcf7-not-valid-tip{color: red !important; margin: 0 0 1.5em 0;}
.wpcf7 .wpcf7-submit{
	padding: .5em 2em;
    line-height: 1.2;
    font-weight: 700;
    font-size: var(--step-0);
    background-color: var(--red) !important;
    border-width: 2px;
    border-style: solid;
    border-color: var(--red) !important;
    border-radius: 0;
    color: #fff !important;
    transition: .2s ease;
	font-family: var(--primary-font);
}

/* CF7 Grid */
.wpcf7 .form_row{display: flex; flex-wrap: wrap; gap: 0 1rem;}
.wpcf7 .form_row > *{flex-basis: 0; flex-grow: 1; min-width: 160px}


/* =======================================================================================================================================
Footer
======================================================================================================================================= */
#footer{padding: 2rem 0;}
#footer *{font-size: var(--step--1);}
#footer .widget{margin: 1rem 0}
#footer .container{display: -webkit-box;display: -ms-flexbox;display: flex; gap: 5%; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#footer .container > .flex_column{width: auto; margin: 0 !important; min-width: 280px}

#footer a:hover{opacity: .5;}
#footer ul.menu{list-style: none; margin: 1em 0 0 0 !important}
#footer ul.menu li{position: relative; border-bottom: 1px solid var(--enfold-footer-color-border);}
#footer ul.menu li a{padding: .2em .8em; position: relative;}
#footer ul.menu li a:before{content: '\e879'; font-family: 'entypo-fontello'; position: absolute; left: 0; top: .2em}

@media only screen and (min-width: 768px){
    #footer .container{-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
}

@media only screen and (min-width: 990px){
    #footer .container{padding-left: calc(15vw + 100px)}
    #footer .container::before{
        content: '';
        width: 15vw;
        height: 10px;
        position: absolute;
        left: 50px;
        top: 1.5rem;
        background: linear-gradient(to bottom, var(--enfold-footer-color-border) 0%, var(--enfold-footer-color-border) 20%, transparent 20%, transparent 60%, var(--enfold-footer-color-border) 60%, var(--enfold-footer-color-border) 100%);
    }
}



#top #socket .copyright{font-size: var(--step--1); float: unset;}
#top #socket .container{padding-top: 2rem; padding-bottom: 6rem;}

#scroll-top-link{display: none}