/*
Theme Name: Blank Elementor Child | m-page
Author: m-page | Christopher Born
Author URI: https://m-page.de
Template: mpage-elementor
Description: Optimiertes Blank-Wordpress Theme für Elementor inkl. nützlicher Addons
Version: 1.2.5
*/




/*** ELEMENTOR FIXES ***/
/**.e-con-inner {padding: 0 !important;}**/

p {margin: 0; padding: 0;}
html {scroll-behavior: smooth; margin: 0 !important; padding: 0 !important; overflow-x: hidden;}
body {padding: 0; margin: 0; overflow-x: hidden;}
/***********/




@font-face {font-display: swap;  font-family: 'Oxanium'; font-style: normal; font-weight: 200; src: url('/wp-content/uploads/oxanium-v19-latin-ext-200.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 300; src: url('/wp-content/uploads/oxanium-v19-latin-ext-300.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 400; src: url('/wp-content/uploads/oxanium-v19-latin-ext-regular.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 500; src: url('/wp-content/uploads/oxanium-v19-latin-ext-500.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 600;src: url('/wp-content/uploads/oxanium-v19-latin-ext-600.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 700; src: url('/wp-content/uploads/oxanium-v19-latin-ext-700.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Oxanium'; font-style: normal; font-weight: 800; src: url('/wp-content/uploads/oxanium-v19-latin-ext-800.woff2') format('woff2');}





html {scroll-behavior: smooth; font-size: var(--fontsize); font-weight: 300; line-height: 1.5 !important;}
body {background: #FFF; color: #444; letter-spacing: 0.0px; overflow-x: hidden;}
* {margin: 0; padding: 0; list-style-type: none; font-family: 'Oxanium', Century Gothic,AppleGothic,verdana,tahoma; box-sizing: border-box;}
.clear {clear: both;}
.tac {text-align: center;}
.tar {text-align: right;}
.tal {text-align: left;}
.dp-b {display: block;}
.w100 {width: 100%;}
img {border: 0px; height: auto; hyphens: auto;}

@media screen and (max-width : 680px){ .vis_desk {display: none !important;} }
@media screen and (min-width : 681px){ .vis_mob {display: none !important;} }


.wrap {width: 100% !important; margin: 0 auto !important; max-width: calc(var(--maxwidth) + var(--gp1-r) + var(--gp1-r)) !important; padding: 0 var(--gp1-r) !important;}



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

::selection {color: #FFF; background: #333;}

:root {--maxwidth: 1600px;}


@media screen and (max-width : 480px){ h1, h2, h3, h4 {hyphens: auto;} }



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

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








/*** ABSTÄNDE ***/
:root {
--gp1-xl3: 256px;
--gp1-xl2: 128px;
--gp1-xl1: 64px;
--gp1: 32px;
--gp1-xs1: 16px;
--gp1-xs2: 8px;
--gp1-xs3: 4px;

--gp1-r-xl3: calc(var(--gp1-r) * 8);
--gp1-r-xl2: calc(var(--gp1-r) * 4);
--gp1-r-xl1: calc(var(--gp1-r) * 2);
--gp1-r: 32px;
--gp1-r-xs1: calc(var(--gp1-r) / 2);
--gp1-r-xs2: calc(var(--gp1-r) / 4);
--gp1-r-xs3: calc(var(--gp1-r) / 8);
}
@media screen and (max-width : 768px){
:root {--gp1-r: 16px;}
}

.gaps1 {display: flex; flex-direction: column; gap: var(--gp1-r);}
.gaps1-xl1 {display: flex; flex-direction: column; gap: var(--gp1-r-xl1);}
.gaps1-xl2 {display: flex; flex-direction: column; gap: var(--gp1-r-xl2);}
.gaps1-xl3 {display: flex; flex-direction: column; gap: var(--gp1-r-xl3);}
.gaps1-xs1 {display: flex; flex-direction: column; gap: var(--gp1-r-xs1);}
.gaps1-xs2 {display: flex; flex-direction: column; gap: var(--gp1-r-xs2);}
.gaps1-xs3 {display: flex; flex-direction: column; gap: var(--gp1-r-xs3);}
/***********/






/*** TRENNER ***/
.space-xs3 {height: var(--gp1-r-xs3);}
.space-xs2 {height: var(--gp1-r-xs2);}
.space-xs1 {height: var(--gp1-r-xs1);}
.space {height: var(--gp1-r);}
.space-xl1 {height: var(--gp1-r-xl1);}
.space-xl2 {height: var(--gp1-r-xl2);}
.space-xl3 {height: var(--gp1-r-xl3);}
/***********/






/*** VERLÄUFE / SCHATTEN ***/
:root {
--grd01: linear-gradient(to right, #034F73 0%,#00A9C6 100%);
--grd01b: linear-gradient(45deg,  #034f73 0%,#0187a7 65%,#019fb9 65%,#00a9c6 100%);
--grd01c: linear-gradient(to right, #4fc2f7 0%,#0edbff 100%);


--shd01: 0 4px 8px #233C4310, 0 4px 16px #233C4310, 0 4px 32px #233C4310;
}
/***********/




/*** BACKGROUNDS ***/
.bg1 {background: #222;}
/***********/





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

.title1, .title1 .elementor-heading-title {display: block; margin: 0; font-size: var(--fs-xl2); line-height: 1.4 !important; font-weight: 200; hyphens: auto; letter-spacing: -0.5px;}
.title2, .title2 .elementor-heading-title {display: block; margin: 0; font-size: var(--fs-xl1); line-height: 1.4 !important; font-weight: 200; hyphens: auto; letter-spacing: -0.5px;}

.colw {color: #fff;}
.colb {color: #000;}
.col1 {color: #000;}
.col2 {color: #00aaf0;}

.fw600 {font-weight: 600;}


.title1 .line2 {display: block; font-size: var(--fs1); font-weight: 500; letter-spacing: 1px;}
.title2 .line2 {display: block; font-size: var(--fs1); font-weight: 500;}



/*Responsive*/
@media screen and (max-width : 768px){
	.title1, .title1 .elementor-heading-title {font-size: var(--fs-xl2); letter-spacing: -0.5px;}
	.title2, .title2 .elementor-heading-title {font-size: var(--fs-xl1); letter-spacing: -0.5px;}
	.tline {max-width: 150px; height: 2px;}
}

.linkanker {position: relative; top: -120px; height: 0px;}
@media screen and (max-width : 768px){ .linkanker {top: -80px;} }
/***********/








/**** NAVIGATION ****/
:root {
--navheight: 96px;
--firstrow: 50px;
}

/*Erste Reihe*/
#nav_firstrow {background: #F9F9F9;}
#nav_firstrow .inner {max-width: calc(var(--maxwidth) + var(--gp1-r) + var(--gp1-r)) !important; height: var(--firstrow); margin: auto; padding: 0 var(--gp1-r); display: flex; justify-content: space-between; align-items: center;}
#nav_firstrow .hspace {height: calc(var(--navheight) / 2);}

#n_socials {display: flex; gap: var(--gp1-r-xs2);}
#n_socials a {display: flex; justify-content: center; align-items: center; width: 24px; aspect-ratio: 1/1; border: 0px solid #666; background: #FFF; box-shadow: var(--shd01);}
#n_socials a svg {display: block; width: 12px; aspect-ratio: 1/1; fill: #333; transition: fill .4s;}
#n_socials a:hover svg {fill: #199EC2;}


#n_contacts {display: flex; gap: var(--gp1-r);}
#n_contacts a {display: flex; align-items: center; gap: var(--gp1-r-xs3); font-size: var(--fs-xs1); color: #333;}
#n_contacts a:hover {color: #199EC2;}
#n_contacts .ico {width: 18px; aspect-ratio: 1/1; position: relative; top: -1px;}
#n_contacts .ico svg {display: block; width: 100%; height: 100%; fill: none; stroke: #000; stroke-width: 4px;}


/*Zweite Reihe*/
#nav_secrow {width: 100%; margin: auto; padding: 0 var(--gp1-r); position: fixed; z-index: 1000; top: var(--firstrow); transition: top 0.5s;}
#nav_secrow .inner {display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: calc(var(--maxwidth)) !important; margin: auto; height: var(--navheight); position: relative;  background: #FFF; padding: 16px; box-shadow: var(--shd01);}
#nav_secrow.scrolled {top: 0px;}

#logo {display: block; width: auto; height: 75%;}
#logo svg {display: block; height: 100%; width: auto;}

.navlinks {display: flex; gap: var(--gp1-r); align-items: center; height: 100%;}
.navlinks li {display: flex; align-items: center; height: 100%;}
.navlinks a {display: flex; align-items: center; height: 100%; font-size: var(--fs1); font-weight: 300;}
.navlinks a:hover {color: #199EC2;}

/*Hamburger Icon*/
#nav_but {width: 26px; height: 16px; border: none; background: none; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;}
#nav_but > div {width: 100%; height: 1.5px; background: #333; transition: all .5s; border-radius: 2px;}
#nav_but.active > div {transform: rotateY(180deg); background: #199EC2;}
@media screen and (min-width : 801px){ #nav_but {display: none;} }



@media screen and (max-width : 1300px){
	:root {--navheight: 64px;}
	.navlinks a {font-size: var(--fs-xs1);}
	#logo {height: 100%;}
	#nav_contbut .button {padding: var(--gp1-r-xs2) var(--gp1-r-xs1); font-size: var(--fs-xs1)}
}

@media screen and (max-width : 800px){
	.navlinks {display: none;}
	#n_contacts a span {display: none;}
	#nav_contbut .button {display: none;}
}






/* MOBILE */
@media screen and (min-width : 801px){
	#mobile_nav {display: none;}
}
@media screen and (max-width : 800px){
	#mobile_nav {position: fixed; z-index: 1500; width: calc(100% - var(--gp1-r-xl2)); padding: var(--gp1); height: 100%; top: 0; left: 0; background: rgba(255,255,255, .95); overflow-y: auto; transform: translate(-100%, 0); transition: transform .4s; backdrop-filter: blur(3px);}
	#mobile_nav.active {transform: translate(0, 0);}

	#closenav {position: absolute; top: var(--gp1-xs1); right: var(--gp1-xs1); width: var(--gp1); height: var(--gp1); border: none; cursor: pointer; background: none;}
	#closenav:after {content:""; display: block; width: 100%; height: 2px; background: #222; position: absolute; transform: rotate(45deg);}
	#closenav:before {content:""; display: block; width: 100%; height: 2px; background: #222; position: absolute; transform: rotate(-45deg);}

	#mobile_nav .title1 {font-weight: 700;}

	/*Linkliste*/
	.mobnav1 {display: flex; flex-direction: column; gap: var(--gp1-r)}
	.mobnav1 li a {display: flex; align-items: center; gap: var(--gp1-r);}
	.mobnav1 li span {font-size: var(--fs-xl1);}
	.mobnav1 li .ico {width: 4px; height: 4px; background: #199EC2; transition: all 0.4s;}
	.mobnav1 li a:hover .ico {background: #222;}

	#mobile_nav .line {height: 1px; background: #d1d8dd;}

	/*Kontakt Buttons*/
	#mob_contacts {display: flex; gap: var(--gp1-r);}
	#mob_contacts a {display: flex; align-items: center; background: var(--grd01b); padding: var(--gp1-xs2);}
	#mob_contacts a:hover {color: #199EC2;}
	#mob_contacts .ico {width: 32px; aspect-ratio: 1/1; position: relative; top: -1px;}
	#mob_contacts .ico svg {display: block; width: 100%; height: 100%; fill: none; stroke: #FFF; stroke-width: 4px;}

	#nav_darkbg {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1010; background: rgba(0,0,0, 0.9); opacity: 0; pointer-events: none; transition: opacity .4s; cursor: pointer;}
	#nav_darkbg.active {opacity: 1; pointer-events: auto;}


	@media screen and (max-width : 680px){
		#mobile_nav {width: calc(100% - var(--gp1-r-xl1)); padding: var(--gp1-xs1);}
		#mobile_nav .first > a {font-size: var(--fs1); padding: var(--gp1-xs1);}
		#mobile_nav .chev {padding: var(--gp1-xs1);}
	}
	@media screen and (max-width : 380px){
		#mob_contacts {justify-content: space-between;}
	}
}





/***********/








/**** HERO ****/
#hero {background: url(/wp-content/uploads/hero_bg.webp) center no-repeat; background-size: cover;}
#hero .wrap {position: relative;}
#hero .spacer {height: calc( var(--navheight) / 2);}

/*Linker Hintergrund*/
#hero .leftbg {width: 325px; height: 100%; position: absolute; top: 0; z-index: 1; background: #222;}
#hero .leftbg_l {display: block; position: absolute; height: 100%; width: 100vw; background: #222; transform: translate(-100%,0);}
#hero .leftbg .fade {display: block; position: absolute; height: 100%; width: 200%; background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%,rgba(0,0,0, 0.0) 100%); transform: translate(100%,0); right: 0;}

#hero .txt {max-width: 650px; position: relative; z-index: 2; color: #FFF;}


@media screen and (max-width : 768px){
	#hero .leftbg {width: 200px;}
	#hero {background: url(/wp-content/uploads/hero_bg-1536x840.webp) center no-repeat; background-size: cover;}
}

@media screen and (max-width : 380px){
	#hero .wrap {background: #222222CC;}
	#hero .leftbg, #hero .leftbg_l, #hero .leftbg .fade {display: none;}
}
/***********/








/**** UBOX 01 ****/
.ubox01 {display: flex; gap: var(--gp1-r-xl1);}
.ubox01 > div {width: 50%;}

.ubox01 > .pic {background: #FFF;}

.ubox01 .pic {position: relative;}
.ubox01 .pic .pic1 {position: absolute; width: calc(100% - var(--gp1-r-xl2) - var(--gp1-r-xl1) - var(--gp1-r-xs1)); height: calc(66%); top: 0; left: 0;}
.ubox01 .pic .pic2 {position: absolute; width: calc(100% - var(--gp1-r-xl2) - var(--gp1-r-xs1)); height: calc(60% + var(--gp1-r-xs2)); bottom: 0; right: 0; border-top: var(--gp1-r-xs1) solid #FFF; border-left: var(--gp1-r-xs1) solid #FFF;}
.ubox01 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;}

.ubox01 .pic .ptxt {position: absolute; width: calc(var(--gp1-r-xl2) + var(--gp1-r-xl1)); height: calc(40% - var(--gp1-r-xs2)); background: var(--grd01b); top: 0; right: 0; display: flex; justify-content: center; align-items: center;}
.ubox01 .pic .ptxt > div {position: relative; width: calc(100% - var(--gp1-r-xl1)); height: calc(100% - var(--gp1-r-xl1)); padding: var(--gp1-r);}
.ubox01 .pic .ptxt svg {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute; top: 0; left: 0;}
.ubox01 .pic .ptxt .f1 {fill: #FFF;}
.ubox01 .pic .ptxt .f2 {fill: #FFF;}


@media screen and (min-width : 801px) and (max-width : 1200px){
	.ubox01 {gap: var(--gp1-r);}
	.ubox01 .pic .pic1 {width: calc(100% - var(--gp1-r-xl2) - var(--gp1-r-xs2));}
	.ubox01 .pic .pic2 {width: calc(100% - var(--gp1-r-xl1) - var(--gp1-r-xs1)); border-top: var(--gp1-xs2) solid #FFF; border-left: var(--gp1-xs2) solid #FFF;}
	.ubox01 .pic .ptxt {width: calc(var(--gp1-r-xl2));}

}

@media screen and (max-width : 800px){
	.ubox01 {flex-direction: column-reverse;}
	.ubox01 > div {width: 100%;}
	.ubox01 .pic {aspect-ratio: 1/1;}
}
/***********/





/**** UBOX 02 ****/
.ubox02 {display: flex; gap: var(--gp1-r-xl1);}

.ubox02 > .txt {width: calc(100% / 3);}

.ubox02 .pics {width: calc((100% / 3) * 2); position: relative; display: flex; gap: var(--gp1-r-xl1);}
.ubox02 .pics > div {position: relative; width: 100%; height: 100%;}
.ubox02 .pics > div:nth-of-type(1) {}
.ubox02 .pics > div:nth-of-type(2) {display: flex; align-items: flex-end;}

.ubox02 .pics > div img {display: block; width: 100%; height: calc(100% - 64px); object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;}


@media screen and (max-width : 1300px){
	.ubox02, .ubox02 .pics {gap: var(--gp1-r);}
}


@media screen and (max-width : 800px){
	.ubox02 {flex-wrap: wrap; flex-direction: column-reverse;}
	.ubox02 > .txt {width: 100%;}
	.ubox02 .pics {width: 100%; aspect-ratio: 2/1;}
}
/***********/





/**** UBOX 03 ****/
:root {
--ubox03_gap: var(--gp1-r-xs1);
}
.ubox03 {display: flex; gap: var(--gp1-r-xl1);}

.ubox03 > .txt {width: calc(100% / 3);}

.ubox03 .pics {width: calc((100% / 3) * 2); align-self: stretch; position: relative; display: flex; flex-wrap: wrap; gap: var(--ubox03_gap);}
.ubox03 .pics .pic1 {width: calc(40% - (var(--ubox03_gap) / 2)); height: calc(50% - (var(--ubox03_gap) / 2)); position: relative;}
.ubox03 .pics .pic2 {width: calc(60% - (var(--ubox03_gap) / 2)); height: calc(50% - (var(--ubox03_gap) / 2)); position: relative;}

.ubox03 .pics img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;}


@media screen and (max-width : 800px){
	.ubox03 {flex-wrap: wrap; flex-direction: column;}
	.ubox03 > .txt {width: 100%; order: 1;}
	.ubox03 .pics {width: 100%; aspect-ratio: 6/4; order: 2;}
}
/***********/






/**** UNSER LEISTUNGEN ****/
:root {
--ourservices_grow: 256px;
}

.ourservices {display: flex;}
.ourservices .cell {width: calc(100% / 3); min-height: 500px; /*aspect-ratio: 1/1*/; position: relative; transition: all .8s; background: #111; overflow: hidden;}
.ourservices .cell .pic {position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
.ourservices .cell .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute; transition: all .8s;}

.ourservices .cell .desc {position: relative; height: 100%; z-index: 2; display: flex; align-items: flex-end;}
.ourservices .cell .txt {padding: var(--gp1-r); color: #FFF; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 30%,rgba(0,0,0, 0.0) 100%);}
.ourservices .cell .tit {font-size: var(--fs-xl2); transition: all .8s;}
.ourservices .cell .more {display: block; width: fit-content; margin-top: 16px; color: #FFF; font-weight: 600; background: var(--grd01c); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.ourservices .cell .buttonwrap {margin-top: var(--gp1-xs1);}



.ourservices .cell .hidden {display: grid; grid-template-rows: 0fr; transition: all .8s;}
.ourservices .cell .hidden > div {overflow: hidden;}


/*Hover Animation*/
@media screen and (min-width : 801px){
	.ourservices:hover .cell {width: calc((100% / 3) - (var(--ourservices_grow) / 2 ));}
	.ourservices:hover .cell .tit {font-size: var(--fs-xl1);}
	.ourservices .cell:hover .tit {font-size: var(--fs-xl2);}
	.ourservices .cell .hidden {width: calc(100% + var(--ourservices_grow));}
	.ourservices .cell:hover {width: calc((100% / 3) + var(--ourservices_grow));}
	.ourservices .cell:hover .hidden {width: 100%;}

	.ourservices .cell:hover .hidden {grid-template-rows: 1fr;}
	.ourservices .cell:hover .pic img {transform: scale(1.0, 1.0); opacity: 0.7}
}

@media screen and (max-width : 1000px) and (min-width : 801px){
:root {--ourservices_grow: 128px;}
}


@media screen and (max-width : 800px){
	.ourservices {flex-direction: column; gap: var(--gp1-r);}
	.ourservices .cell {width: 100%; min-height: unset; aspect-ratio: 4/3;}
	.ourservices .cell .hidden {grid-template-rows: 1fr;}
}

/***********/






/**** ÜBER UNS ****/
.aboutus {display: grid; grid-template-columns: repeat(2,1fr); gap: var(--gp1-r-xl1);}
.aboutus > div.first {background: #222; position: relative; color: #FFF;}
.aboutus > div.first .left {display: block; position: absolute; height: 100%; width: 100vw; left: -100vw; background: #222;}
.aboutus > div.first .right {display: block; position: absolute; right: -100vw; height: 100%; width: 100vw; background: #222;}

.aboutus > div.second {grid-row: span 2; position: relative;}
.aboutus > div.second > div {position: absolute; width: 100%; height: calc(100% - var(--gp1-r-xl1)); top: var(--gp1-r-xl1); left: 0;}
.aboutus > div.second > div img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute; transition: all .8s;}


@media screen and (max-width : 768px){
	.aboutus > div.second {grid-row: span 1;}
	.aboutus > div.second > div {height: calc(100% - var(--gp1-r-xl2)); top: var(--gp1-r-xl1);}
	.aboutus > div.third {grid-column: span 2;}
}

@media screen and (max-width : 550px){
	.aboutus {grid-template-columns: repeat(1,1fr);}
	.aboutus > div.first {padding-bottom: var(--gp1-r-xl2)}
	.aboutus > div.second {}
	.aboutus > div.second > div {position: relative; aspect-ratio: 8/5; height: 100%; top: calc((var(--gp1-r-xl2) + var(--gp1-r-xl1)) * -1);}
	.aboutus > div.third {grid-column: span 1; position: relative; top: calc((var(--gp1-r-xl2) + var(--gp1-r-xl1)) * -1); margin-bottom: calc((var(--gp1-r-xl2) + var(--gp1-r-xl1)) * -1)}
}
/***********/














/**** LISTEN ****/
.list1 {margin: var(--mg) var(--mg); padding: 0;}
.list1 li {background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI2U4NmQ0NCIgZD0iTTMgMi4yaDB2M0w2LjkgOCAzIDEwLjh2M2gwTDExIDh6Ii8+PC9zdmc+") no-repeat left center; background-size: 1rem; margin: .5rem 0 .5rem var(--mg); padding-left: 1.25rem;}
.list1 .list1 {margin: 10px 10px 0px 0px; font-size: 110%;}

/*Iconlist1*/
:root {--il1_gap: var(--gp1-r); --il1_ico: 48px;}
.iconlist1 {display: flex; flex-direction: column; gap: var(--gp1-r);}
.iconlist1 li {display: flex; gap: var(--gp1-r); align-items: center;}
.iconlist1 .ico {width: var(--il1_ico); height: var(--il1_ico);}
.iconlist1 .ico svg {display: block; width: 100%; stroke: #000; stroke-width: 3px; fill: none;}
.iconlist1 .txt {width: calc(100% - var(--il1_ico) - var(--il1_gap) );}
.iconlist1 .tit {display: block; font-weight: 700; margin-bottom: var(--gp1-r-xs3)}
/***********/






/**** ADRESS BOXEN ****/
.adresses {display: grid; grid-template-columns: repeat(2,1fr); gap: var(--gp1-r-xl1);}
.adresses > div {position: relative;}

.adresses .pic {aspect-ratio: 16/9; position: relative;}
.adresses img {display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;}

.adresses .adr1 .txt {margin-right: var(--gp1-r-xl1); margin-top: calc(var(--gp1-r-xl1) * -1); background: #FFF; box-shadow: var(--shd01); padding: var(--gp1-r); position: relative; z-index: 10;}
.adresses .adr2 .txt {margin-left: var(--gp1-r-xl1); margin-top: calc(var(--gp1-r-xl1) * -1); background: #FFF; box-shadow: var(--shd01); padding: var(--gp1-r); position: relative; z-index: 10;}


@media screen and (max-width : 768px){
	.adresses {grid-template-columns: repeat(1,1fr);}
	.adresses .adr2 .txt {margin-right: var(--gp1-r-xl1); margin-left: 0;}
}
/***********/






/**** BUTTONS ****/
.buttonwrap {text-align: center; display: flex;}
.buttonwrap.cnt {justify-content: center;}
.button {display: flex; align-items: center; width: fit-content; position: relative; text-align: center; z-index: 1;}
.button .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all .4s; z-index: 0;}
.button span {transition: all .4s; position: relative; z-index: 1;}

.button1 {padding: var(--gp1-r-xs1) var(--gp1-r); font-size: var(--fs1); font-weight: 600; text-decoration: none; transition: all 0.3s;}


/*Col1*/
.buttoncol1 .bg {background: var(--grd01); border-radius: 0px;}
.buttoncol1 span {color: #FFF; letter-spacing: 0px;}
.buttoncol1:hover .bg {filter: brightness(0%);}
.buttoncol1:hover span {color: #FFF;}

/*Col2*/
.buttoncol2 .bg {background: #000; border-radius: 0px;}
.buttoncol2 span {color: #FFF; letter-spacing: 0px;}
.buttoncol2:hover .bg {background: #FFF;}
.buttoncol2:hover span {color: #000;}
/***********/






/**** KONTAKT ÜBERSICHT ****/
.contact_overview {display: flex; flex-direction: column; gap: var(--gp1-r);}
.contact_overview #clogo {display: block; width: 100%; max-width: 352px; height: auto; fill: #000;}

.clist1 {font-size: var(--fs1); display: flex; flex-direction: column; gap: var(--gp1-xs1);}
.clist1 li {display: flex; align-items: center; gap: var(--gp1-xs1);}
.clist1 li a {color: #333;}
.clist1 li:hover a {color: #199EC2;}
.clist1 svg {display: block; width: 26px; aspect-ratio: 1/1;}
.clist1 .s1 {stroke: #000; stroke-width: 4.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

:root {--co_ava: var(--gp1-xl2);}
.geschaeftsfuehrer {box-shadow: var(--shd01); text-align: center; margin-top: calc(var(--co_ava) * 0.5); max-width: 512px;}
.geschaeftsfuehrer img {width: var(--co_ava); display: block; margin: calc(var(--co_ava) * -0.5) auto 0 auto;}
.geschaeftsfuehrer .detail {padding: var(--gp1-r);}
.geschaeftsfuehrer strong {font-size: var(--fs-xl2); font-weight: 700; display: block;}
.geschaeftsfuehrer span {font-size: var(--fs-xl1); font-weight: 400; display: block;}

@media screen and (max-width : 480px){
	:root {--co_ava: calc(var(--gp1-xl1) + var(--gp1));}
}
/***********/









/**** eRecht ****/

.erecht24-elementor-widget p {margin-bottom: 16px;}
.erecht24-elementor-widget h2 {margin-top: 64px;}
.erecht24-elementor-widget h3 {margin-top: 32px;}
.erecht24-elementor-widget ul {padding-left: 32px; margin: 16px 0;}
.erecht24-elementor-widget ul li {list-style-type: disc !important;}
.erecht24-elementor-widget a {border-bottom: 1px dotted #000; color: #0081a4;}
.erecht24-elementor-widget a:hover {border-bottom: 1px dotted #000; color: #000;}
/***********/










/**** FOOTER ****/
/*Eingschobene Box*/
#footbox {background: var(--grd01b); position: relative; transform: translate(0, var(--gp1-r-xl2)); display: flex; align-items: stretch; gap: var(--gp1-r);}
#footbox .pic {position: relative; width: 33%; margin: 0; aspect-ratio: 4/3;}
#footbox .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;}
#footbox .txt {width: 66%; display: flex; align-items: center;}
@media screen and (max-width : 550px){
	#footbox {flex-direction: column;}
	#footbox .pic {width: 100%; margin: 0; aspect-ratio: 3/1;}
	#footbox .txt {width: 100%; text-align: center; padding: var(--gp1-r);}
	#footbox .space-xl1 {display: none;}
	#footbox .buttonwrap {justify-content: center;}
}

/*Main Footer*/
footer {background: #222; padding-top: var(--gp1-r-xl2);}
footer .inner {max-width: calc(var(--maxwidth) + var(--gp1-r) + var(--gp1-r)) !important; margin: auto; padding: 0 var(--gp1-r);}

#footcells {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(4,1fr); padding: var(--gp1-r-xl1) 0;}

#footcells .cell {display: flex; flex-direction: column; gap: 32px;}
#footcells .cell-big {grid-column: span 2;}

#flogo {display: block; width: 100%; max-width: 320px; height: auto; fill: #FFF;}



/*Liste1*/
.flist1 {font-size: var(--fs1); display: flex; flex-direction: column; gap: var(--gp1-xs1);}
.flist1 li {display: flex; align-items: center; gap: var(--gp1-xs1);}
.flist1 li a {color: #BBB;}
.flist1 li:hover a {color: #FFF;}
.flist1 svg {display: block; width: 26px; aspect-ratio: 1/1;}
.flist1 .s1 {stroke: #FFF; stroke-width: 4.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;}

/*Liste2*/
.flist2 {font-size: var(--fs1); display: flex; flex-direction: column; gap: var(--gp1-xs1);}
.flist2 a {color: #BBB; display: flex; align-items: center; gap: var(--gp1-xs1);}
.flist2 a:hover {color: #FFF;}
.flist2 li a > div {width: 4px; height: 4px; background: #00a9c6; transition: all .4s;}
.flist2 li:hover a > div {background: #FFF;}

/*Letzte Reihe*/
.lastrow {border-top: 1px solid #CCC; padding: var(--gp1-xs1) 0; color: #999; text-align: center;}
.lastrow a {color: #BBB;}
.lastrow a:hover {color: #FFF;}

/*Responsive Einstellungen*/
@media screen and (max-width : 900px){
	#footcells {grid-template-columns: repeat(2,1fr); gap: var(--gp1-xl1);}
}
@media screen and (max-width : 480px){
	#footcells {grid-template-columns: repeat(1,1fr);}
	#footcells .cell-big {grid-column: span 1;}
	.flist1 svg {width: 22px;}
}
/***********/