/* restaurant burkia -  01.12.2022 */

/* ibm-plex-sans-200 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-v8-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/ibm-plex-sans-v8-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ibm-plex-sans-v8-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-200.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ibm-plex-sans-v8-latin-200.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}
/* ibm-plex-sans-regular - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/ibm-plex-sans-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ibm-plex-sans-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ibm-plex-sans-v8-latin-regular.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}
/* ibm-plex-sans-500 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-v8-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/ibm-plex-sans-v8-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ibm-plex-sans-v8-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ibm-plex-sans-v8-latin-500.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}
/* ibm-plex-sans-700 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-v8-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/ibm-plex-sans-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ibm-plex-sans-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ibm-plex-sans-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ibm-plex-sans-v8-latin-700.svg#IBMPlexSans') format('svg'); /* Legacy iOS */
}

:root {
	--beige: #e6ddc9;
	--beige-light: #f2eee3;
	--blackcolor: #000000;
	--whitecolor: #ffffff;
}



* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}


html {background-color:#fff; overflow-x: hidden;} 
body {font-family: 'IBM PLex Sans','Open Sans', sans-serif; height:100%; width:100%; color:#000000;  font-size: 16px; line-height: 19px; margin: 0 0 0 0; background-color:#fff;  margin:0px; padding:0px}
body p, body div {}


/* diverse Divs  ---------------------- */
h1 {font-size:60px; text-align:left; margin-bottom:30px; font-weight:500; max-width: 100%; line-height: 80px; color: #000; text-transform: uppercase; width: 100%}
h2 {font-size: 20px; font-weight: bold; margin-bottom: 30px; letter-spacing: 3px; color: #000}
h3 {font-size: 18px; font-weight: normal;margin-bottom: 30px;} 
#start h1 {font-size: 120px;line-height: 130px; text-align: center; text-transform: none}
#start h2 {text-align: center; color: #fff; line-height: 30px}
h1 span {display:block}

.black h1 {color: #fff}
.black h2 {color: #fff}
.split h2 {font-size: 50px; line-height: 65px; margin-top: 50px}

.content.black a.buttonlike, .content a.buttonlike { 
	width: 100%;
	margin: 0px auto;
	display: flex;
	padding: 10px;
	background-color: var(--beige);
	border: 1px solid var(--beige);
	border-radius: 10px;
	color: var(--blackcolor) !important;
	justify-content: center;
	font-size: 1.2em;
}


.content.black a.buttonlike:hover, .content a.buttonlike:hover {
	width: 100%;
	margin: 0px auto;
	display: flex;
	padding: 10px;
	background-color: var(--blackcolor);
	border: 1px solid var(--beige);
	border-radius: 10px;
	color: var(--whitecolor) !important;
	justify-content: center;
	font-size: 1.2em;
}


h1.smallBox {display: flex}
.beigeBox {background-color: var(--beige);font-size: 24px;text-transform: uppercase;width: auto;text-align: center;height: 50px;display: flex;align-items: center;justify-content: center;padding: 0 10px;color: #000;font-weight: 500;border-radius: 10px}

.content.beige .beigeBox::after, .content .beigeBox::after {
	background-image: url("/UserFiles/structure/logo-B-geschwungen-solo-black.png");
	width: 50px;
	height: 50px;
	display: block;
	background-size: contain;
	content: " ";
	position: relative;
	right: -34px;
	top: -25px;
}

.content.black .beigeBox::after {
	background-image: url("/UserFiles/structure/logo-B-geschwungen-solo-white.png");
	width: 50px;
	height: 50px;
	display: block;
	background-size: contain;
	content: " ";
	position: relative;
	right: -34px;
	top: -25px;
}

.boxOuter {display: flex; justify-content: center}

.work {font-family: 'IBM Plex Sans',sans-serif; font-weight: 400}


.white {background-color:#FFF; border:1px solid #fff}
.pink {background-color:#efdfdf;  min-height:150px; max-height:469px; overflow:hidden}
.pinklinks {float:left; display:block; position:relative}
.pinkrechts {float:left; display:block; position:relative}
#obenOuter {z-index:1000;text-align:center; position:fixed;width:100%; margin:0px auto; color: #fff;background-color:#000000;top: 0px}
#balkenoben {height:150px; width:1200px;  z-index:1; max-width:100%; margin:0px auto; position:relative; transition: height 0.5s ease; display: flex;justify-content: space-between; align-items: center} 
#logolink { height:80%; position:relative; z-index:999; transition: height 0.5s ease;width: auto;display: block;} 
#logolink.logoneu {display: flex; align-items: center; gap: 10px; height: 50% } 
body.sticky #balkenoben {height: 80px}
#logo {display:block; width:auto; height:100%;} 
#logoText {color: #fff; font-size: 18px; text-align: left}
#logoText .logoTextExtra {font-size: 14px}

#name {position:relative; float:left; text-align:left; margin-left:0px; margin-top:38px}

#langChange {width:auto; text-align:right; float:right; margin-top:0px; position:absolute; right:20px; top:10px; text-transform:uppercase; display:none}
#langChange a {display:block; height:20px;float:left; width:auto; text-align:center; margin-right:10px}
#langChange a:hover {color:#009ee0;}
#langChange a.langChange:hover {color:#009ee0;}
#langChange a.langChange.aktiv {color:#009ee0;}
/*#navMobile {display:none} */
#logoMobile {display:none}
#langChangeMobile {display:none}

.lineLong {border-bottom: 2px solid white;width: 100%; margin-bottom: 30px}

.lineTop {position: absolute;top: 0px;height: 30px;width: 1px; left: 50%; background-color: var(--beige)}
.beige .lineTop {background-color: #fff}
.lineBottom {position: absolute;bottom: 0px;height: 30px;width: 1px; left: 50%; background-color: var(--beige)}
.beige .lineBottom {background-color: #fff}

.content ul li {margin-left: 20px}

/* Navigation ----------------------------- */
/* empty.png in menu, damit der hover - effekt nicht rüttelt */



#navOuter {display: flex; align-items: center;font-weight: 700; text-transform: uppercase;transition: 0.4s ease-in-out} 
#nav {width:100%;  position:relative; z-index:3;}
.menu{text-align:left; position:relative; padding-top:0px; /*color:#676767;*/  background-image:url(/UserFiles/structure/empty.png); background-repeat:repeat;}
.menu ul {margin:0px; padding:0px;display: flex;} 
.menu ul li {padding:0px; margin:0px; list-style-type:none; width:auto; text-align:center; display:flex; position:relative; z-index:99; margin-right:23px;flex-direction: column}
.menu ul li:last-child {border-right:0px; margin-right:0px}

.menu ul li.aktiv {}
.menu ul li a {text-decoration:none; letter-spacing:0em; font-size:16px; display:block; width:100%; float:left; height:19px; border-bottom:2px solid transparent; color: #fff9f5; cursor:pointer; margin-bottom: 3px}
.menu ul li .hoverline {width: 0px;height: 3px;background-color: #fff; transition: 0.2s ease-in-out}
.menu ul li:hover .hoverline {width: 30px}
.menu ul li.active .hoverline {width: 30px}

#slider {width:1000px; max-width:100%;  height:100%;  position:relative; margin:0px auto; text-align:center; max-height:470px; float:left; overflow:hidden; margin:0px; padding:0px}

#startvideo {position: absolute;top: 0px;z-index: 1;opacity: 0.1; width: 100%}
/* Disable Default video control overlay */
.videocontrols {display:none !important}

.backgroundImage {position: absolute; width: 100%; height: 100%; top: 0px; opacity: 0.4; object-fit: cover; object-position: top}

/* CONTENT */
#contentOuter {width:100%; height:auto; min-height:200px; margin-top: 90px}
#contentHome {width:100px;  z-index:1; max-height:680px; margin:0px auto; position:relative; overflow: hidden; max-width: 100%; margin-top: 40px;}
#contentHome img {width:100%;}
#content , .content {width:auto; z-index:100; text-align:center; position:relative; height:auto;clear: both;position: relative;z-index:99;text-align:left;font-size:16px;padding-left:0px;padding-top:0px;padding-right:0px;letter-spacing: 0.1em;box-sizing:border-box;overflow: hidden; min-height: 500px}
.content:last-of-type {margin-bottom: 0px}
.content.fullpage {margin-top: 170px}
.content.black {background-color:#000000}
.content.black a {color: var(--beige) !important}
.content.black .contentsection .inhalt {color:#fff}
.contentAfter {margin-top: 40px;}
#content .contentAfter {margin-top: 0px; width: 100%}
#content a {color:#000000}
.content.fullpage {width: 1200px !important; max-width: 100%}

#contentInnen { text-align:left; width:1020px; max-width: 100%; padding-bottom:20px; margin-top:75px}
#content ul li, #contentInnen ul li {margin-left:20px}

.contentsection .line {width:50px; height:10px; margin-bottom:20px; background-color: #000;}
.black .contentsection .line {background-color: #fff;}
.contentsection {padding: 100px 0px; position: relative; width: 1200px; max-width: 100%; margin: 0px auto; z-index: 100; display: flex; flex-direction: column; align-items: center}
.contentsection .inhalt {color: #000000; line-height: 1.6em; }
.content#start .contentsection {padding-bottom: 80px; height: calc(100vh - 90px);display: flex;flex-direction: column;align-items: center;justify-content: space-between}
.content#projekte {min-height: 0}

.content.small .contentsection {min-height: 0px}


.socialWallOuter {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1fr; position: relative; gap: 10px; font-size: 0.8em}
.socialWallOuter .socialPost {position: relative; overflow: hidden}
.socialWallOuter .socialPost img.media {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.socialWallOuter .socialPost .coverText {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: translateY(110%); background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 20px; transition: 0.3s ease transform}
.socialWallOuter .socialPost .coverText .coverTextInner {height: 98%; width: 100%; overflow: hidden}
.socialWallOuter .socialPost:hover .coverText {transform: translateY(0%);} 

/* SPLIT PAGES */
.split {display: flex; width: 100%}
.split .left {width: 35%}
.split .right {width: 100%; padding: 30px; position: relative; top: -115px}
.split .right img{width: 100%;}

.beige {background-color: var(--beige)}
.beige .split {flex-direction:row-reverse}
.beige h1 {justify-content: flex-end; }
.beige h1 .beigeBox{ margin-right: 27%; background-color: #000; color: #fff}
.beigeBox.black {background-color: #000; color: #fff}
.beige .split .right {padding-left: 0px}

.projektBox {width: 100%;display: flex;justify-content: space-between;background-color: var(--beige);height: 120px;align-items: center;padding: 0px 50px;align-self: baseline;position: relative;bottom: 10%;margin-top: 15vh;
}
.projektBox .projektText {font-size: 36px;line-height: 36px;text-transform: uppercase;font-weight: 500;}


.buttonSection {width: 100%; display: flex; justify-content:center; margin: 40px 0px}
.buttonOuter {width: 350px;height: 80px;display: flex;align-items: center;justify-content: space-evenly;cursor:pointer;font-weight: bold; background: linear-gradient(to right,var(--beige) 50% ,#000000 50%); background-size: 200% 100%; background-position: right bottom; color: #fff; letter-spacing: 0em; text-transform: uppercase; border-radius: 10px; font-size: 18px; border: 1px solid black; transition: .7s ease}
.buttonOuter:hover {background-position: left bottom; color: #000000}
.arrow {height: 25px; }
.buttonOuter.beige { border: none; align-self: flex-end; background: linear-gradient(to right,black 50% ,var(--beige) 50%); background-size: 201% 100%; background-position: right bottom; color: #000; transition: .7s ease; margin: 0px auto}
.buttonOuter.beige:hover {background-position: left bottom; color: #fff}
.buttonSection.overVideo, .buttonSection.split  {position: relative; height: 0px;width: 100%; margin: 0}
.buttonSection.overVideo a, .buttonSection.split a {position: absolute; top: -100px; z-index: 999}
.buttonOuter.beige a {color: #000 !important}
.buttonOuter.beige:hover a, .buttonOuter.beige:hover a:hover {color: #fff !important}

#angebotGrid {display:flex; flex-wrap: wrap;margin-top: 80px;}
#angebotGrid .angebot {width: 33%;  height: 400px; transition: 0.3s ease-in-out; display: flex; flex-direction: column; align-items: center; padding: 50px 0px}
#angebotGrid .angebot:nth-of-type(2n-1) {background-color: var(--beige-light)}
#angebotGrid .angebot .icon {height: 70px; display: block}
#angebotGrid .angebot .iconwhite {height: 70px; display: none}
#angebotGrid .angebot .icon img, #angebotGrid .angebot .iconwhite img {height: 100%}
#angebotGrid .angebot .angebottext {transition: 0.3s ease-in-out; margin-top: 20px; padding: 0px 20px; color:#000; text-align: center}
#angebotGrid .angebot:hover .angebottext, #angebotGrid .angebot.active .angebottext {color:#fff}
#angebotGrid .angebot:hover, #angebotGrid .angebot.active {background-color:#000; color: #fff;}
#angebotGrid .angebot:hover .icon, #angebotGrid .angebot.active .icon {display: none}
#angebotGrid .angebot:hover .iconwhite, #angebotGrid .angebot.active .iconwhite {display: block}

#angebotGrid .angebot .lineSmall {width:30px; height:6px; margin-bottom:15px; background-color: #000000; transition: 0.2s ease-in-out}
#angebotGrid .angebot:hover .lineSmall {width: 50px}
#angebotGrid .angebot .name {text-transform: uppercase; width: 60%; text-align: center; transition: 0.1s ease-in-out;color:#000}
#angebotGrid .angebot:hover .name, #angebotGrid .angebot.active .name {color:#fff}

.contentsection#projekte, .contentsection#team {min-height: 0px; padding-bottom: 0px}
.imageGrid {display: flex; flex-wrap: wrap; margin: 0px auto; width: 2560px; max-width: 100%;}
.imageGrid img {width: calc(100% /3); height: auto; border: 1px solid black; align-self: flex-start}

.imageGrid.team-img img {width: 25%; height: auto}

.videoBanner {height: 400px; overflow:hidden; display: flex; flex-direction: column}
#projektevideo {opacity: 0.5}

#kundenGrid, #partnerGrid {display: block; width: 100%; max-width: calc(100% - 50px)}
#kundenGrid {margin: 0px auto;}
#kundenGrid .kunde {display: flex;flex-direction: column;justify-content: space-between;min-height: 150px; width: 100%;}
#partnerGrid .partnerOuter, #kundenGrid .kundeOuter {display: flex;justify-content: center; width: 100%;}
#partnerGrid .partner {display: flex;flex-direction: column;justify-content: space-between;min-height: 150px; width: 300px;}

#partnerGrid .partner .lineSmall {width:30px; height:6px; margin-bottom:15px; background-color: #000000; -webkit-transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}
#partnerGrid .partner .partnerImg {max-width: 100%; margin-bottom: 10px; width: 100%}
#partnerGrid .partner:hover .lineSmall {width: 50px}


#kundenGrid .kunde {height: 400px}
#kundenGrid .kunde .bottom {display: flex; height: 75%;color:#000; display: flex; flex-direction: column; font-size: 14px; align-items: center; margin-top: 60px}
#kundenGrid .kunde .bottom .imgSwitcher {width: 150px; height: 150px; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}
#kundenGrid .kunde .bottom img.kundenImg {width: 90%; max-width: none; margin-bottom: 0px; transition: 0.3s ease-in-out; position: absolute}
#kundenGrid .kunde:hover .bottom img.kundenImg.bw {opacity:0}
#kundenGrid .kunde .bottom .name {margin-top: 15px; font-weight: bold; text-transform: uppercase}
#kundenGrid .kunde .bottom .company {margin-top: 5px;  text-transform: uppercase}
#kundenGrid .kunde .top {color: #000; height: 25%; display: flex; justify-content: center; padding: 10px; padding-top: 40px; text-align: center; font-size: 21px; line-height: 35px}

/*
.slick-prev::before, .slick-next::before {content:""}
.slick-prev, .slick-next {top:47%; width: 100px; height: 30px;}
.slick-prev, .slick-prev:hover, .slick-prev:focus {background-image: url("/UserFiles/structure/arrow_long_left.png"); left: -150px; background-size: cover}
.slick-next, .slick-next:hover, .slick-next:focus {background-image: url("/UserFiles/structure/arrow_long_right.png"); right: -150px; background-size: cover}
*/
.slick-prev::before {content: "←"; color: black}
.slick-next::before {content: "→"; color: black}

#carouselcontainer ul li {margin-left:0px}
#inhaltsbildouter {width:100%; display:block; }
/*.inhaltsbild {max-width:100%; display:block;}*/
.inhaltsbild {width:1020px; max-width: 100%; overflow:hidden; width:1020px; border-left:1px solid #FFF; border-right:1px solid #FFF; }

.flexslider {padding-bottom:0px; width:1020px; max-width:100%}
.flexslider .slides img {display: block;width: 100%;}
.flex-control-nav {z-index: 1000}

#spruch {font-size: 21px; color: #663333; text-align: center; padding: 70px 0px;}

.teaserMenu {display: flex; justify-content: space-between; cursor: pointer}
.teaserMenu .menuBox {display: block}
.teaserMenu .menuBox .menuBoxName {text-align: center; margin-top: 15px; font-family: 'Arial'; font-size: 16px; font-weight: normal;}

.hr {border: 1px solid #cccccc}

.contentBox {margin-top: 50px; display: flex; justify-content: space-between}
.contentBox .contentText {width: 50%}
.contentBox .contentText .text, .contentBox .contentText .text span{font-family: 'Arial' !important; font-size: 16px !important}
.contentBox .contentImg {max-width: 100%; width: 520px}
.hidden {display:none;  transition: all 0.2s ease}
.visible {display:flex; transition: all 0.2s ease}

.kontakt {text-align: center; padding-top: 100px; margin-bottom: 80px;}
.kontakt .anfragen {color: #b40e32}

.tarifeOuter {display: flex; justify-content: center; align-items: center; margin-top: 80px}
.tarifeOuter .tarif {min-height: 500px; width: 300px; border: 3px solid #000000; margin: 0px 25px; display: flex; flex-direction: column; align-items: center; transition: 0.3s ease-in-out}
.tarifeOuter .tarif:hover {transform: scale(1.2)}
.tarifeOuter .tarif .tarifHead {height: 150px; width: 100%; border-bottom: 3px solid #000000;display: flex; flex-direction: column;align-items: center; padding: 10px;justify-content: center}
.tarifeOuter .tarif .tarifHead .name {font-size: 23px;font-weight: 600;margin-bottom: 10px;}
.tarifeOuter .tarif .tarifHead .preis {font-size: 46px;line-height: 48px;font-weight: bold;}
.tarifeOuter .tarif .tarifBottom {width: 100%; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; background-color: #000000; min-height: 350px; color: #ffffff}
.tarifeOuter .tarif ul.vorteile {width: 100%; display: flex; flex-direction: column; align-items: center}
.tarifeOuter .tarif ul.vorteile li {list-style: none; margin-bottom: 20px; }


.dankeOuter {max-width: 100%; width: 1200px; margin: 0 px auto; display: flex; flex-direction: column; align-items: center; padding-bottom: 50px}
.dankeOuter .dankeBild {width: 60%}
.dankeOuter h1 {text-align: center; margin-top: 30px}

/** Carousel **/
#carouselcontainer {width:935px; height:340px; text-align:left;}

#pfeil_links1 {position:relative;top:160px; float:left; z-index:9999;left:-30px}
#pfeil_links1 a {color:#fff; text-decoration:none}


#pfeil_rechts1 {position:absolute;top:0px; right:0px; float:right; margin-top:160px; z-index:9999; margin-right:24px;}
#pfeil_rechts1 a {color:#fff; text-decoration:none}
.jcarousel {position: relative;overflow: hidden;width: 1020px;height: 340px;}
.jcarousel ul {width: 2000em;position: relative;list-style: none;margin: 0;padding: 0;}
.jcarousel li {width:1020px; height:340px;cursor: pointer; overflow:hidden; float:left;}
.jcarousel-control-prev{color: #fff;height: 40px; position: absolute;text-align: center;text-decoration: none;text-shadow: 0 0 1px #000;width: 22px;background-image:url(/UserFiles/structure/arrows.jpg);background-repeat:no-repeat;}
.jcarousel-control-next {color: #fff;height: 40px;position: absolute;text-align: center;text-decoration: none;text-shadow: 0 0 1px #000;width: 22px;background-image:url(/UserFiles/structure/arrows.jpg);background-position:0px -45px;}
.jcarousel-control-prev:hover, .jcarousel-control-next:hover {}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {cursor: default;opacity: 0.5;}
/* Ende Carousel */


.letsWorkOuter {background: var(--beige); padding: 60px 0}
.letsWorkOuter .letsWork {width: 1200px; max-width: 100%; margin: 0px auto;font-size: 200px;font-weight: bold;line-height: 200px;text-align: center;-webkit-text-stroke: 1px black;-webkit-text-fill-color: transparent;background-image: linear-gradient(to left,currentColor 0,currentColor 50%,transparent 50%);background-position: 0 0;transition: background-position .9s ease-out; background-size: 200%; background-clip: text; -webkit-background-clip:text; cursor: default}
.letsWorkOuter:hover .letsWork {background-position: -100% 0;}


#adresse {width:100%;height:auto; padding-left:0px; text-align:left; position:relative; margin:0px auto; text-align:center; display: flex; align-items: flex-start; justify-content: center; color: #fff; z-index:99;background-color: #000000; padding-top: 40px; padding-bottom:40px; z-index:100}
#adresseInnen {width:1200px; max-width:100%; margin:0px auto; position:relative; text-align:left; font-size:18px; line-height: 24px; display:flex; align-items: stretch; justify-content: space-between} 

#nav_unten {height:20px; border-top:2px solid #eee; padding-top:20px; padding-bottom:20px;  width:950px; padding-left:30px;}
#nav_unten a {display:block; float:left; margin-right:40px; font-size:20px;}
#nav_unten a:hover {color:#000;}
#adresse #adresseInnen .left, #adresse #adresseInnen .right, #adresse #adresseInnen .center {width: 33%; display: flex; flex-direction: column}
#adresse #adresseInnen .center {align-items: center; justify-content: center}
#adresse #adresseInnen .center .logo {width: 50%}
#adresse #adresseInnen .right {padding-left: 65px; justify-content: space-between}
#adresse #adresseInnen .right .text {font-size: 48px; font-weight: bold; line-height: 48px; text-align: right}
#adresse #adresseInnen .right .socials  {display: flex; align-items: center; width: 100%; justify-content: flex-end}
#adresse #adresseInnen .right .socials a {height: 60px; display: block}
#adresse #adresseInnen .right .socials a img {height: 100%}
#adresse #adresseInnen .right .socials a.insta {height: 55px; margin-left: 20px} 
#adresse #adresseInnen .right .socials a.linkedin, #adresse #adresseInnen .right .socials a.youtube {height: 50px; margin-left: 33px} 
#adresse .right .footerNav {width: 100%; display: flex; justify-content: flex-end}
#adresse .normal {}
#adresse .footerNav a {padding:0px; margin:0px; list-style-type:none; width:auto; float:left; text-align:center; display:block; position:relative; z-index:99; margin-right:23px;color: #fff9f5}
#adresse a {color: #fff9f5}
#adresse .footerNav a:last-child {margin-right:0px;}

.subnav {width:125px; float:left; position:relative}
.subnav a:hover, .subnav a.aktiv {color:#990066}
.subnavContent {border-right:1px solid #edecec; margin-right:15px; float:left}
.subnavContent .subnav {border-top:1px solid #edecec; border-bottom:1px solid #edecec; margin-left:-30px; padding-left:25px; height:35px; padding-top:5px; clear:both}
.subnavContent .subnav:first-child {border-bottom:0px}
.contentAfterSubnav {float:none; position:relative; margin-left:140px; width:auto}
#content .subnavOuter {float:left; width:auto; position:relative}
#content .subnavOuter .subnavContent .subnav a.subnavlink   {color:#7f7e7e; font-size:13px}
#content .subnavOuter .subnavContent .subnav a.subnavlink:hover {color:#990066; font-size:13px}
#content .subnavOuter .subnavContent .subnav.aktiv a.subnavlink {color:#990066; font-size:13px}

.content .text {margin-top: 100px}


#claim {position:absolute; z-index:99999999999999999; top:305px; left:35px; color:#FFF; font-size:2.25em}


#created {position:absolute; top:50px; left:25px; z-index:1000000; background-color:#FFF; width:900px; border:1px solid #999; border-radius:5px; display:none; padding:30px; box-shadow:  1px 1px 5px 5px #eee; }
#created a {text-decoration:underline;}
#createdcloser {position:absolute; top:-15px; left:980px; background-image:url(/UserFiles/structure/close.png); width:30px; height:30px; text-indent:-10000px; cursor:pointer}


#bottom {width:1020px; max-width:100%; text-align:right; margin-top:10px;  margin-left:0px; margin-bottom:10px}


.breadcrumps {position:absolute; top:-25px; width:1020px; text-align:right; background-color:#FFF}

.nozoom {border:0px}
a.higslide img {border:0px}

.platzhalter {color:#FFF}

/* Formularfelder ---------------- */

div.zeile {display: flex}
div.zeile div.left {width: 30%}
div.zeile div.rechts {width: 70%}

.formtabelle {margin-top:20px}
input,button, select{font-family: 'Raleway','Helvetica'; font-size:16px; background:transparent; border:none; border-bottom:1px solid rgba(48,48,48,0.4); margin-bottom:30px; height:40px; color:#000; padding-left:10px; width:100%; letter-spacing: 0.1em; outline: none;transistion: 0.3s ease-in-out}
input:focus {border-bottom:1px solid rgba(48,48,48,1)}

div.black input, div.black button, div.black select{color:#ffffff}
div.black input:focus {border-bottom:1px solid #ffffff}
div.black form#eform .left, div.black .blackWhite {color: #ffffff !important}

#formDanke {color: #000}
div.black #formDanke {color: #fff}

label {margin-bottom: 5px}
.anabmelden {float:left; margin-right:10px; border:0px }
#newslettersubmit {width:162px; text-align:center}
#password {width:123px; margin-top:5px; color:#87888a; padding-left:3px}
#commentsUser {font-family: 'Raleway','Helvetica'; font-size:16px; overflow:auto;  font:100%;  padding-left:10px;  padding-top:10px; white-space: pre-wrap; width:100%; height:170px; border:1px solid rgba(48,48,48,0.4); border-radius:2px; background:transparent; resize: none; letter-spacing: 0.1em; outline: none;}
#commentsUser:focus {border: 1px solid rgba(48,48,48,1)}
#Senden {cursor:pointer; width:100%; color:#000000; position:relative; z-index:100000; height:40px; margin-top:30px; margin-bottom:20px; font-size:16px; font-weight:bold; padding-left: 0px; border: 1px solid rgba(48,48,48,0.4); display: flex; justify-content: center; align-items: center}
#Senden .arrow {margin-left: 10px; transition: 0.3s ease-in-out}
#Senden:hover .arrow {margin-left: 25px}
#formDanke {color:#000000; display:none}

#formularOuter {display: flex; margin-top:100px}
#formularOuter #eform {width: 50%;display: flex;flex-direction: column;}
#formularOuter .kontaktDaten {padding-left: 50px; padding-top: 20px; color: #000000; margin-bottom: 50px}

.socialLink {position: fixed; bottom: 0; right: 0; background-color: #000000; color: #fff; height: 50px; width: 150px; overflow: hidden; z-index:99} 
.socialLink .sl {display: flex; height: 100%; align-items: center; padding:8px; transition: 0.6s ease-in-out; justify-content: space-evenly}
.socialLink a {color:#fff}
.socialLink .sl img {height: 100%}  
.socialLink .facebook.sl {background-color: #4267B2}
.socialLink .instagram.sl {background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);}


img {border:0px;}
.highslide > img{border:10px solid #F00;}
.image {border:0px}
.emailcodierung{color:#000}
.emailcodierung  > a{}
a {outline:none; text-decoration:none; color:#32353e;}
.clearer {clear:both}


.fancybox-skin {background: none repeat scroll 0 0 #333;}
.fancybox-title {color:#FFF; padding-left:10px;}

.downImg {width:20px; margin-right:10px}

/*mobile Nav*/
#mobileOpenerOuter {display:none;  width:30px;argin-top:0px; z-index:101;}
#navOuterMobile {display:block; width:100%; height:50px; background-color:#FFF}
#navMobileOpener {display:flex; flex-direction: column; gap:5px; padding-right:0px; cursor:pointer; width:30px;}
#navMobileOpener .balken {width:30px; height:5px; background-color:#fff9f5;}
#navMobileCloser {display:none; padding-right:0px; cursor:pointer; width:30px}
#navMobileCloser .balken {width:30px; height:5px; background-color:#fff9f5; margin-top:5px}
#navMobileMenu {position:absolute; width:100%; height: 100%; left:0px;  height:100%; min-height:100px; z-index:100000;color:#666; padding:0px; display: block; transform: translateX(100%); transition: .5s ease-in-out} 
.menuMobile {padding-bottom:10px; padding-top: 10px;height: 100%; display: flex; justify-content: center; align-items: center}
#navMobileMenu #mobileCloser {position: absolute; cursor: pointer; top: 20px; right: 20px; height: 40px; width: 40px; background-image: url("/UserFiles/structure/mobile_closer_white.png"); background-size: cover}


img.highslide {cursor:pointer}

.magenta, div.magenta, strong.magenta, a.magenta, h1.magenta,  h2.magenta,  h3.magenta,  h4.magenta, td.magenta {color:#9d005c}
p.magenta, span.magenta {color:#9d005c}



.fancybox-opened .fancybox-skin { background-color:#ffffff !important}

.formtabelle td {padding-bottom:20px}


.cblack {color: #000000}
.bold {font-weight: bold}
.normal {font-weight: normal}
.tac {text-align: center}
.mb20 {margin-bottom: 20px}
.mb40 {margin-bottom: 40px}
.mt40 {margin-top: 40px}
.mt30 {margin-top: 30px !important} 
.mt80 {margin-top: 80px}
.uc {text-transform: uppercase}