/*
Theme Name: Elementor | m-page
Author: m-page | Christopher Born
Author URI: https://m-page.de
Description: Optimiertes Blank-Wordpress Theme für Elementor
Version: 2023
*/




html {scroll-behavior: smooth; font-size: var(--fontsize); font-weight: 300; line-height: 1.4 !important; box-sizing: border-box;}

body {background: #3d3d3f; color: #FFF; letter-spacing: 1.5px;}
* {margin: 0; padding: 0; list-style-type: none; font-family: 'Jost', Century Gothic,AppleGothic,verdana,tahoma;}
.clear {clear: both;}
.tac {text-align: center;}
.dp-b {display: block;}
img {border: 0px; height: auto; hyphens: auto;}

@media screen and (max-width : 680px){ .novis680 {display: none;} }


.wrap {width: 100%; margin: 0 auto; max-width: 1400px;}

p {margin: var(--mg);}

.tac {text-align: center;}
.fs120 {font-size: 120%; line-height: 130%;}

a {text-decoration: none; color: #FFF; transition: color 0.3s;}
a:hover {color: #b6e045;}

::selection {color: #000; background: #9fc53a;}

:root {--maxwidth: 1400px;}






/*** FONT SCALES ***/
:root {
--fontsize: clamp(14px, calc(1.25vw + 1.5px), 20px);
--ratio: 1.4;
}


.fs-xl4, .fs-xl4 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xl3, .fs-xl3 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xl2, .fs-xl2 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));}
.fs-xl1, .fs-xl1 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio)));}
.fs1, .fs1 .elementor-heading-title {font-size: var(--fontsize);}
.fs-xs1, .fs-xs1 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio)));}
.fs-xs2, .fs-xs2 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));}
.fs-xs3, .fs-xs3 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));}
.fs-xs4, .fs-xls4 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));}
:root {
	--fs-xl4: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl3: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl2: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));
	--fs-xl1: calc(var(--fontsize) * (var(--ratio)));
	--fs1: var(--fontsize);
	--fs-xs1: calc(var(--fontsize) / (var(--ratio)));
	--fs-xs2: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));
	--fs-xs3: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xs4: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
}
/***********/







/*** ÜBERSCHRIFTEN ***/
.elementor-heading-title {line-height: 1.4 !important;}

.title1 .elementor-heading-title {display: block; margin: 0; color: #FFF !important; font-size: var(--fs-xl2); line-height: 1.4 !important; font-weight: 700; hyphens: auto;}
.title1 .line2 {display: block; font-size: var(--fs-xl1); color: #b6e045; font-weight: 300;}
/***********/








/*** NAVIGATION ***/
#nav_row1, #nav_res_row1 {background: linear-gradient(to right, #121212 0%,#232323 50%,#121212 100%); position: relative;}
#nav_row2 {background: linear-gradient(to right, #616161 0%,#818181 50%,#616161 100%);}

#nav_row1:after {content:""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: url("/wp-content/uploads/2023/06/nav_bg.webp") no-repeat 25% center;}

.nav_details {font-size: var(--fs-xs1);}
.nav_details .footico-fill1 {stroke:#000; stroke-width: 3.0px;}
.nav_details .footico-fill2 {stroke:#b6e045; stroke-width: 3.0px;}

#nav_row2 a {font-weight: 400;}
#nav_row2 a:hover {color: #000; font-weight: 400;}

#menu_desk {}
#menu_desk a {position: relative;}
#menu_desk a:hover {text-shadow: 0 0 15px rgba(255,255,255, 0.5);}
#menu_desk a:after {content:""; width: 64px; height: 3px; background: #b6e045; position: absolute; bottom: -16px; left: 50%; transform: translate(-50%,0); opacity:0;}
#menu_desk a:hover:after {bottom: 0px; opacity:1;}


#res_menu {position: fixed; z-index: 900; width: 100%; height: calc(100% - 60px); padding: 16px; left: 0px; bottom: 0px; background: linear-gradient(45deg, #616161 0%,#818181 100%); overflow-y: auto; transition: all 0.4s; opacity: 0; pointer-events: none;}
#res_menu.active {opacity: 1; pointer-events: auto;}

#menu_ul a {font-size: var(--fs-xl1); font-weight: 500;}
#menu_ul a:hover {color: #000;}
/***********/








/*** UNIVERSELLE ELEMENTE ***/
.greenedge {position: relative;}
.greenedge:after {content:""; display: block; width: 32px; height: 32px; background: #9fc53a; position: absolute; top: 0px; right: 0px; clip-path: polygon(0 0, 100% 0, 100% 100%);}


.shadow01 {box-shadow: 20px 20px 40px rgba(0,0,0, .2), 10px 10px 20px rgba(0,0,0, .2), 5px 5px 10px rgba(0,0,0, .2), 2px 2px 5px rgba(0,0,0, .2);}
.shadow01b {box-shadow: 0px 0px 40px rgba(0,0,0, .2), 0px 0px 20px rgba(0,0,0, .2), 0px 0px 10px rgba(0,0,0, .2), 0px 0px 5px rgba(0,0,0, .2);}

.shadow02 {box-shadow: 20px 20px 40px rgba(0,0,0, .1), 10px 10px 20px rgba(0,0,0, .1), 5px 5px 10px rgba(0,0,0, .1), 2px 2px 5px rgba(0,0,0, .1);}

.fshadow01 {filter: drop-shadow(20px 20px 40px rgba(0,0,0, .2)) drop-shadow(10px 10px 20px rgba(0,0,0, .2)) drop-shadow(5px 5px 10px rgba(0,0,0, .2)) drop-shadow(2px 2px 5px rgba(0,0,0, .2));}
.fshadow02 {filter: drop-shadow(20px 20px 40px rgba(0,0,0, .1)) drop-shadow(10px 10px 20px rgba(0,0,0, .1)) drop-shadow(5px 5px 10px rgba(0,0,0, .1)) drop-shadow(2px 2px 5px rgba(0,0,0, .1));}
/***********/








/*** BUTTONS ***/
.button1 a, .button1 button {position: relative;} .button1 a span {position: relative; z-index: 2;}
.button1 a:hover, .button1 button:hover {transform: scale(1.03, 1.03);}
.button1 a:after, .button1 button:after {content:""; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%); background-size: 300% 300%; background-position: right; transition: all .4s;}
.button1 a:hover:after, .button1 button:hover:after {background-position: 0% 0;}
.button1 svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .4)); transition: all .4s;}
.button1 a:hover svg, .button1 button:hover svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .7));}



:root {--bsc1: 77deg 55% 29%;}
.buttoncol1 a, .buttoncol1 button {background: #9FC53A; box-shadow:
0.3px 0.5px 0.7px hsl(var(--bsc1) / 0.36),
0.8px 1.6px 2px -0.8px hsl(var(--bsc1) / 0.36),
2.1px 4.1px 5.2px -1.7px hsl(var(--bsc1) / 0.36),
5px 10px 12.6px -2.5px hsl(var(--bsc1) / 0.36);
}
.buttoncol1 a:hover, .buttoncol1 button:hover {background: #b4e338; box-shadow:
0px 0.3px 0.5px hsl(var(--bsc1) / 0.57),
0px 0.4px 0.5px -0.6px hsl(var(--bsc1) / 0.5),
0px 0.5px 1.1px -1.2px hsl(var(--bsc1) / 0.44),
0.1px 1.5px 2.7px -1.9px hsl(var(--bsc1) / 0.38),
0.1px 3px 5.9px -2.5px hsl(var(--bsc1) / 0.31),
0.3px 6px 11px -3.1px hsl(var(--bsc1) / 0.4),
0.4px 9px 18.6px -3.7px hsl(var(--bsc1) / 0.2),
0.7px 15px 29.3px -4.4px hsl(var(--bsc1) / 0.2),
1px 22px 43.4px -5px hsl(var(--bsc1) / 0.15);
}
/***********/








/*** HERO1 ***/
.hero-ttl {font-size: var(--fs-xl2);}
@media screen and (max-width : 950px){ .hero-ttl {font-size: var(--fs-xl1);} }
@media screen and (max-width : 480px){ .hero-ttl {font-size: var(--fs1);} }

.hero-sub {font-size: var(--fs-xl1);}
@media screen and (max-width : 950px){ .hero-sub {font-size: var(--fs1);} }
/***********/







/*** DIENSTLEISTUNGEN ***/
#dienstleistungen .footico-fill1 {fill: none !important; stroke:#000; stroke-width: 2.0px; stroke-linejoin: round; stroke-linecap: round;}
#dienstleistungen .footico-fill1b {fill: none !important; stroke:#000; stroke-width: 1.0px; stroke-linejoin: round; stroke-linecap: round;}
#dienstleistungen .footico-fill1c {fill: none !important; stroke:#000; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round;}
#dienstleistungen .footico-fill2 {fill: none !important; stroke:#b6e045; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round;}
#dienstleistungen .footico-fill2b {fill: none !important; stroke:#b6e045; stroke-width: 1.0px; stroke-linejoin: round; stroke-linecap: round;}
.ico-bg-green {fill: #b6e045;}
/***********/










/*** ABSCHNITT "DARUM" ***/
.title_reason .elementor-heading-title {position: relative; width: fit-content; margin: auto;}
.title_reason .elementor-heading-title:before {content:""; position: absolute; width: 16px; height: 16px; top: -4px; left: -16px; border-left: 2px solid #b6e045; border-top: 2px solid #b6e045;}
.title_reason .elementor-heading-title:after {content:""; position: absolute; width: 16px; height: 16px; bottom: -4px; right: -16px; border-right: 2px solid #b6e045; border-bottom: 2px solid #b6e045;}

@media screen and (min-width : 769px) and (max-width : 1024px){
	.reason_ele-1 {order: 1;}
	.reason_ele-2 {order: 3;}
	.reason_ele-3 {order: 4;}
	.reason_ele-4 {order: 2;}
	.reason_ele-5 {order: 5;}
	.reason_ele-6 {order: 6;}
}
/***********/









/*** ABSCHNITT "EINSATZGEBIETE" ***/
.list-3rows {column-count: 3;}
@media screen and (max-width : 1024px){
	.list-3rows {column-count: 2 !important;}
}
/***********/






/*** TEXTBOX01 ***/
.txtbox01 .footico-fill1 {fill: none !important; stroke:#000; stroke-width: 1.5px; stroke-linecap:round; stroke-linejoin: round;}
.txtbox01 .footico-fill1b {fill: none !important; stroke:#000; stroke-width: 0.75px; stroke-linecap:round; stroke-linejoin: round;}
.txtbox01 .footico-fill1c {fill: none !important; stroke:#000; stroke-width: 1.0px; stroke-linecap:round; stroke-linejoin: round;}
.txtbox01 .footico-fill2 {fill: none !important; stroke:#b6e045; stroke-width: 1.5px; stroke-linecap:round; stroke-linejoin: round;}
.txtbox01 .footico-fill2b {fill: none !important; stroke:#b6e045; stroke-width: 1.0px; stroke-linecap:round; stroke-linejoin: round;}

.pic_clip01_left, .pic_clip01_right {width: 100%;}
.pic_clip01_left img {clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);}
@media screen and (max-width : 768px){
	.pic_clip01_left img {position: relative; left: -20px;}
}

.pic_clip01_right img {clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%);}
@media screen and (max-width : 768px){
	.pic_clip01_right img {position: relative; right: -20px;}
}
/***********/







/*** BLOG ***/
.elementor-posts .elementor-post__card {background: linear-gradient(45deg, #232323 0%,#252525 100%); box-shadow: 20px 20px 40px rgba(0,0,0, .2), 10px 10px 20px rgba(0,0,0, .2), 5px 5px 10px rgba(0,0,0, .2), 2px 2px 5px rgba(0,0,0, .2) !important;}
.elementor-posts .elementor-post__excerpt p {color: #FFF !important;}
.elementor-post__card .elementor-post__title {text-transform: uppercase; text-align: center;}
.elementor-post__card .elementor-post__title:after {content:""; display: block; width: 80px; margin: 32px auto 0 auto; height: 4px; background: #a8dd43;}
.elementor-post__read-more span {color: #a8dd43;}
.elementor-posts .elementor-post__card .elementor-post__meta-data {border-top: 1px solid #777 !important; background: linear-gradient(45deg, #606060 0%,#808080 100%); color: #000; font-size: var(--fs-xs1); font-weight: 400;}

.fazit {background: #00000026; padding: 32px; position: relative;}
.fazit:after {content: ""; display: block; width: 32px; height: 32px; background: #9fc53a; position: absolute; top: 0px; right: 0px; clip-path: polygon(0 0, 100% 0, 100% 100%);}

@media screen and (max-width : 768px){
	.fazit {padding: 16px;}
}
/***********/








/*** 3 ICONS BOXEN ***/
#tripple_icon_box .footico-fill1 {stroke-width: 1.5px; stroke-linecap:round; stroke-linejoin: round;}
#tripple_icon_box .footico-fill2 {stroke-width: 1.0px; stroke-linecap:round; stroke-linejoin: round;}
/***********/










/*** FAQ / AKKORDEON ***/
.elementor-accordion-title {font-size: var(--fs-xs1); color: #FFF !important;}
.elementor-tab-content {font-size: var(--fs-xs1); letter-spacing: 1px;}
/***********/






/*** KONTAKTFORMULAR ***/
#contactform input {border: 0 !important;}
/***********/




.erecht h2 {margin-top: 64px;}
.erecht h2, .erecht h3 {margin-top: 32px;}






/*** NAV BOTTOM ***/
#bottom_nav {}
#bottom_nav svg {display: block; margin: auto; width: 48px; height: 48px;}
#bottom_nav span {display: block; text-align: center; font-size: var(--fs-xs1); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; color: #FFF;}
.nb-ico1 {fill:none; stroke:#020203; stroke-width: 2.5px; stroke-linecap:round !important; stroke-linejoin: round !important; stroke-linecap: round !important; stroke-miterlimit: 10; transition: all 0.4s}
.nb-ico2 {fill:none; stroke:#A9CA49; stroke-width: 2.5px; stroke-linecap:round !important; stroke-linejoin: round !important; stroke-linecap: round !important; stroke-miterlimit: 10; transition: all 0.4s}

#bottom_nav a:hover .nb-ico1 {stroke: #A9CA49;}
#bottom_nav a:hover .nb-ico2 {stroke: #020203;}

@media screen and (max-width : 768px){
	#bottom_nav svg {width: 32px; height: 32px;}
}
/***********/





/*** FOOTER ***/
footer {background: linear-gradient(to right, rgba(18,18,18,1) 0%,rgba(35,35,35,1) 50%,rgba(18,18,18,1) 100%);}

.foot-ttl1 {text-transform: uppercase; font-weight: 300; font-size: var(--fs1);}
.foot-li1 .elementor-icon-list-text {font-weight: 400; font-size: var(--fs-xs1);}

@media screen and (max-width : 950px){
	.foot-rows {grid-template-columns: repeat(2,1fr) !important;}
}
@media screen and (max-width : 480px){
	.foot-rows {grid-template-columns: repeat(1,1fr) !important;}
	.foot-ttl1 {font-size: var(--fs-xl1);}
	.foot-li1 .elementor-icon-list-text {font-size: var(--fs1);}
}

.footico-fill1 {fill: none !important; stroke:#FFF; stroke-width: 3.0px;}
.footico-fill2 {fill: none !important; stroke:#b6e045; stroke-width: 3.0px;}
/***********/






/*** Cookie Consent Button ***/
button[data-testid="uc-privacy-button"], .jEcacy button {left: inherit !important; right: 16px !important; bottom: 74px !important;}
/***********/