/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 24, 2020 */

@font-face {
    font-family: 'montserratbold';
    src: url('../fonts/montserrat-bold-webfont.eot');
    src: url('../fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-bold-webfont.woff') format('woff'),
         url('../fonts/montserrat-bold-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;
	font-display: fallback;
}

@font-face {
    font-family: 'montserratregular';
    src: url('../fonts/montserrat-regular-webfont.eot');
    src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff'),
         url('../fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;
	font-display: fallback;
}

/*________allgemeines________*/

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

:root {
	--backcolor1: #5f7a95;
	--backcolor2:#c9cace;
	--backcolor3:#f0eced;
	--text: #202023;
	--highlight:#b58b9f;
}

/* Cookie Banner */
.cc-pc-head-lang-select {
	display: none;
}
.cc-cp-body-tabs-item a {
	font-family: 'montserratregular', Arial, sans-serif !important;
}
.cc-nb-changep {
	color: #ffffff !important;
}
.cc-cp-body-tabs li:nth-child(3), .cc-cp-body-tabs li:nth-child(5) {
	display: none;
}
#tracking, #strictly-necessary {
	background-color:#212121;
	background-image:none;
}
/* Cookie Banner Ende */

html {
	scroll-behavior: smooth;
}
img{
	max-width: 100%;
	height: auto;
}
header, nav, main, article, section, footer{
	display:block;
}
.clearfix:after{
	content:"";
	display:block;
	clear:both;
}

body{
	font-family: 'montserratregular', Arial, sans-serif;
	font-size:1rem;
	color:var(--text);
	line-height: 26px;
}
h1,p,a{
	-webkit-hyphens:auto;
		-ms-hyphens:auto;
			hyphens:auto;
}
h1, h2, h3, h4, .beitrag {
	font-family: 'montserratbold';
	font-weight: normal;
	font-size:20px;
	text-transform: uppercase;
	margin-bottom: 30px;
    display: block;
}

h1 {letter-spacing:1px;
}

h2, h3, h4, .beitrag {letter-spacing:2px;
}

p {
	margin-bottom: 20px;
}

p, a, main li {
	font-size:18px;
}

a {
	color:inherit;
}
strong{
	font-family: 'montserratbold';
	font-weight: normal;
}
summary h2, summary h3{
	display:inline;
	margin-bottom: 0;
}


details{
	margin-bottom:20px;
}
summary::marker {
	display: inline;
	font-size: 1.5rem;
}
details summary {
	cursor: pointer;
}
details h3{
	margin-top:20px;
}
section {
	padding-top: 40px;
	padding-bottom: 20px;
}
section.sec_headerimg {
	padding-top: 0px;
}
section.summarylist {
	padding-top: 70px;
	padding-bottom: 40px;
}
section.sec_headerimg > div.contentwrapper.summarylist {
	padding-bottom: 20px;
}
.contentwrapper{
	max-width: 1400px;
	margin: 0 auto;
	padding: 0px 20px;
}
header .contentwrapper, .headline_startseite {
	padding-bottom: 10px;
}
header .contentwrapper {
	background: rgba(0,0,0,0.3);
}
header .contentwrapper.dark, .headline_startseite {
	background: rgba(0,0,0,0.6);
}
header#start .contentwrapper {
	background: none;
	padding-bottom: 0px;
}
/*classen und ids*/

.anfahrt {
	background-image: url("/img/anfahrt.jpg");
	background-repeat: no-repeat;
	height: 160px;
	margin-bottom: 20px;
}
.anfahrt p {
	color: var(--text) !important;
	text-align: center;
	padding-top: 50px;
	font-weight: bold;
}


#gambiopartner{
    height:56px;
    width:auto;
    margin-top:30px;
}

#gambiopartner.gphome {
    margin-top: 20px;
}

/*button*/
.button, .button:link, .button:visited{
	display:inline-block;
	width: 100%;
	padding:10px 20px;
	border:1px solid var(--text);
	color:var(--text);
	line-height: inherit;
	text-decoration: none;
	transition: all 0.5s;
	margin-top: 30px;
	margin-bottom: 30px;
	hyphens: none;
	text-align: center;
}



.button_head, .button_head:link, .button_head:visited{
	display:inline-block;
	padding:10px 20px;
	border:1px solid #fff;
	color:#fff;
	line-height: inherit;
	text-decoration: none;
	transition: all 0.5s;
	hyphens: none;
	text-align: center;
    margin-bottom:10px;
}
.button.btyp1 {
	color: #ffffff;
	border-color: #ffffff;
}

.button.btyp2, .button.btyp3 {
	color: #ffffff;
	border-color: #ffffff;
    margin-top:20px;
    margin-bottom:0;
    max-width:100%;
}

.button.btyp3 {
	color: var(--text);
	border-color: var(--text);
    width:auto;
    margin-left:auto;
    margin-right:auto;
}


.button.vierschritte{
	color: var(--highlight);
	border-color: var(--highlight);
    margin-left:auto;
    margin-right: auto;
}

/*.button.fullwidth {
	max-width: none;
}*/
.button:hover, .button:focus, .button:active, .button_head:hover, .button_head:focus, .button_head:active, .button.vierschritte:hover, .button.vierschritte:focus, .button.vierschritte:active{
	background-color:var(--text);
	color:#fff;
	-webkit-user-select: none; -webkit-touch-callout: none;
}
.button.mitbild {
	margin-top: 0;
	padding: 0px 0px 10px 0px;
}
.button.sec_end {
	margin-bottom: 0px;
}
/*button ende*/




.center{
	text-align:center;
}

.contentwrapper.summarylist {
	padding-top: 30px;	
}
.contentwrapper .innerbox {
	padding: 30px 0px;
}
.cont_scrolldown a:link, .cont_scrolldown a:visited  {
	color:#fff;
}
.cont_scrolldown {
	position:absolute;
	bottom:-50px;
	left:0;
	right:0;
	text-align:center
}
.framed{
	border:1px solid var(--text);
	padding:15px;
	position:relative;
}
.headline, .headline_startseite{
	text-align:right;
	color:#fff;
	padding:0 10px;
}
.headline_startseite{
	position: absolute;
	top: 30%;
	left: 0px;
	width: 100%;
}
.headline_startseite h1{
	margin-top:15px;
	font-size:24px;
	line-height: 26px;
	letter-spacing:4px;
}

.highlight_text{
    color:var(--highlight);
}
.img_rounded{
	display:block;
	border-radius:50%;
}
.mapframe {
	height: 250px;
	width: 95%;
	border: none;
}

.nomargin{
    margin:0;
    padding:0;
}


.sub_headline{
	text-align:right;
	color:#fff;
	padding-top:80px;
}

.spacermiddle{
	height:110px;
}
/*.spacersmall.noflex{
	height: 115px;
	background-color:#fff;
	position: relative;
	bottom: 65px;
	flex-basis:100%;
}*/
.subline{
	text-transform:uppercase;
	font-size:16px;
}
.scrolldown:link , .scrolldown:visited {
	display: block;
	width:50px;
	height:50px;
	background-image:url("../img/icon_sprite_scrolldown.png");
	background-repeat:no-repeat;
	background-position:top left;
	margin:0 auto;
}
.scrolldown:hover, .scrolldown:focus, .scrolldown:active{
	background-position:top right;
}

.schritte{
    font-size:40px;
   font-family: 'montserratbold';
    color:var(--backcolor3);
    height: 64px;
    width:64px;
    background-color:var(--highlight);
    display:inline-block;
    border-radius:50%;
    margin-bottom: 30px;
    padding-top:22px;
}

.schritte::after{
    content:"";
    height:100%;
    width:1px;
    display: inline-block;
    position: absolute;
    left:50%;
    z-index:-1;
    background-color:var(--highlight);
    top:10px;
}

.schritte.letzter::after, .schritte.erster::before{
    display:none;
}

.subpage{
	height: 450px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left -550px bottom;
}
.sectionheader{
	height:350px;
	margin-bottom:40px;
	overflow: hidden;
	text-align: center;
}
.sectionheader img{
	min-height:350px;
	min-width: 800px;
}
.viertel{
        flex-basis:100%;
    } 

/*farbklassen */
.typ1{
	background-color:var(--backcolor1);	
	color:#fff;
}	
.typ2{
	background-color:var(--backcolor2);	
}		
.typ3{
	background-color:var(--backcolor3);	
}	
.typhighlight{
	background-color:var(--highlight);	
	color:#fff;
	position:relative;
}	
.typtext{
		background-color:var(--text);
		color:#fff;
}		
/*farbklassen ende*/	
/*teaser*/
.teaser h2{
	font-size:18px;
	margin:10px 0;
	letter-spacing: 0;
}
.teaser p, .teaser li, .teaser li a{
	font-size:16px;
	line-height: 26px;
}
.teaser div{
	position:relative;
	padding-left:10px;
	padding-right:10px;
	text-align: center;
}
.teaser .button {
	max-width: none;
	margin: 15px auto 30px auto;
}
/*teaser  ende*/
#agentur{
	background-image:url("../img/full_wir.jpg") ;
	background-color:var(--backcolor3);
	background-blend-mode: multiply;
}
#adwords{
	background-image:url("../img/header_adwords.jpg") ;
	background-color: #7090a6;
	background-position: left -200px center;
}
#corporate{
	background-image:url("../img/header_corporate.jpg");
	background-color: var(--text);
}
#design{
	background-image:url("../img/header_design.jpg");
	background-color: var(--highlight);
	background-position: left -550px top;
}

#entwicklung, #programmierung{
	background-image:url("../img/header_webentwicklung.jpg");
	background-position:left -550px top;
	background-color: var(--backcolor1);
}
#webentwicklung{
	background-image:url("../img/header_webentwicklung_neu.jpg");
	background-position:left -550px top;
	background-color: var(--backcolor1);
}
#internetprogrammierung{
	background-image:url("../img/header_internetprogrammierung.jpg");
	background-position:left -550px top;
	background-color: var(--backcolor1);
}
#entwicklungteiler{
	background-image:url("../img/beitrag_webentwicklung.jpg");
}
#googlemaps{
	background-image:url("../img/header_google.jpg");
	background-color: var(--backcolor2);
}
#gambio_shop{
background-image:url("../img/header_gambio.jpg");
	background-color: #ff7420;
}
#hosting{
	background-image:url("../img/header_hosting.jpg");
	background-color: var(--text);
}
#impressum, #kontakt{
	background-image:url("../img/header_impressum.jpg");
	background-position:left -550px top ;
	background-color: #757575;
}
#projekt{
	background-image:url("../img/header_prozess.jpg");
	background-color: var(--text);
}
#prozess{
	background-image:url("../img/header_prozess.jpg");
	background-color: var(--text);
}
#referenzen{
	background-image:url("../img/header_referenzen.jpg");
	background-color: var(--highlight);
	background-blend-mode: multiply;
	background-position: left -550px center;
}

#schritt1{
	background-image:url("../img/icon_eins.svg") ;
}
#schritt2{
	background-image:url("../img/icon_zwei.svg") ;
}
#schritt2.hgdark{
	background-image:url("../img/icon_zwei_weiss.svg") ;
}
#schritt3{
	background-image:url("../img/icon_drei.svg") ;
}
#schritt1weiss{
	background-image:url("../img/icon_eins_weiss.svg") ;
	background-size:136px 300px;
}
#schritt2weiss{
	background-image:url("../img/icon_zwei_weiss.svg") ;
	background-size:235px 300px;
}
#schritt3weiss{
	background-image:url("../img/icon_drei_weiss.svg") ;
	background-size:235px 300px;
}
#schritt4weiss{
	background-image:url("../img/icon_vier_weiss.svg") ;
	background-size:273px 300px;
}
#schritt1, #schritt2, #schritt3{
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left -60px top 4px;
}
#schritt1.fixedheight, #schritt2.fixedheight, #schritt3.fixedheight{
	background-size: auto 400px;
}
#schritt1weiss, #schritt2weiss, #schritt3weiss, #schritt4weiss{
	background-repeat:no-repeat;
	background-position:left -30px top 0px;
	padding-top:30px;
}
#seoteiler{
	background-image:url("../img/full_seo.jpg") ;
}
#seo{
	background-image:url("../img/header_seo.jpg");
	background-color: #7090a6;
	background-position:left -550px top;
}
#server{
	background-image:url("../img/header_server.jpg");
	background-color:var(--text);
}
#software{
	background-image:url("../img/header_software.jpg");
	background-color:var(--backcolor1);
}
#start{
	height:100vh;
	background-color:var(--backcolor1);
	background-image:url("../img/header_home_neu.jpg") ;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left -400px top;
}
#webdesign{
	background-image:url("../img/beitrag_webdesign_01.jpg");
	filter:saturate(360%) ;
	opacity: 0.8;
    height:450px;
}
#wizard, #domainsuche{
	background-image:url("../img/header_wizard.jpg") ;
	background-color: var(--highlight);
	background-blend-mode: multiply;
}
#wp{
	background-image:url("../img/header_wp.jpg");
	background-color: var(--highlight);
}
#wp_neu2 {
  background-image: url("../img/header_wp_neu2.jpg");
  background-color: var(--highlight);
  background-blend-mode: multiply;
}
#wplogo{
    padding:15px;
}
#wshop{
	background-image:url("../img/header_wshop.jpg");
	background-color: #ff7420;
}
#webshopVideo, #seoVideo {
	height:100%;
}

#mainstart{
	margin-top: 45px;
}
#mainstart h2 {
	padding-top: 30px;
}
/*#mainstart > section.typ1, #mainstart > section.typhighlight {
	margin: 0px;
	padding: 0px;
}*/

#mainstart > section.typ1 div.zweigeflext, #mainstart > section.typ1 .zweigeflext div, #mainstart > section.typhighlight .zweigeflext_end div {
	margin-bottom: 0px;
}
#mainstart .vierzig {
	padding: 40px 10px 60px 10px;
}
#mainstart .vierzig p:last-of-type {
	margin-bottom: 0px;
}


#logo_home{
	margin-top:20px;
	padding: 0 10px;
	width:250px;
	height: auto;
}
#adresse_footer{
	margin-top:45px;
	padding-left:18px;
}
#unseredaten{
	border-top:1px solid ;
	padding-top:20px;
	margin-top: 20px;
}

/*flextboxen*/
.dreigeflext, .zweigeflext, .zweigeflext_end, .zweigeflext_breit, .geflext{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-direction:row;
	flex-direction:row;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
}

.dreigeflext.teaser div{
	margin-top: 40px;
}
.dreigeflext.teaser div:last-of-type{
	margin-bottom:40px;
}
.dreigeflext div, .zweigeflext div, .zweigeflext_breit div, div.zweigeflext, .zweigeflext_end div{
	-ms-flex-preferred-size:100%;
	flex-basis:100%;
}

div.zweigeflext, .zweigeflext_end div{
	margin-bottom: 20px;
}

/*weg???*/
.noflex{
	-ms-flex-preferred-size:100%;
	flex-basis:100%;
}
.bgimg_home{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top right;
}
/*umbenennen (ist in der index)*/
.float{
	float:left;
}
/*umbenennen*/
.flexbox-logo-images {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	align-content: center;
}
.flexbox-logo-images-item {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto !important;
	text-align: center
}
.flexbox-logo-images > * {
	width: 25%;
}


/*flextboxen ende*/	






/*slidein boxen*/


.module {
  position: relative;
  float: left;
  padding: 15px;
  color:var(--highlight); 
    padding-top:0;
}
.module h3{
    margin-bottom:0;
    padding-bottom:20px
}
.module h3, .module p.modultext{
    background-color:var(--backcolor3);
}

.module p.modultext{
    margin-bottom:0;
    padding-bottom:10px;
}
.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}




/*navigation*/
#topnav{
	background-color:var(--text);	
	width:100%;
	height: 60px;
	position: relative;
}	
nav ul{
	list-style:none;
}
#topnav a{
	color:#fff;
	text-decoration:none;
	text-transform: uppercase;
	font-size:14px;
	hyphens: none;
}
a#open, a#close{
	font-size:30px;
	line-height: 60px
}
a#open {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 50px;
}
a#close{
	display:none;
	line-height: 60px;
}
#topnav li{
	background-color:var(--text);
}
#topnav li a{
	display:block;
	padding: 0 10px;
	line-height: 60px;
}
#topnav li a:hover, #topnav li a:focus, #topnav li a:active{
	background-color:rgba(255,255,255,0.5);
	-webkit-user-select: none; -webkit-touch-callout: none;
}
.menue_hi {
	background-color:rgba(255,255,255,0.5);
}
.mainmenue li{
	font-family: 'montserratbold';
}

ul.submenue.subseo {
	min-width: 190px;
}
.submenue li{
	font-family: 'montserratregular';
}
.mainmenue > li > a::after {
	display: block;
	background-color: #ffffff;
	width: 80%;
	height: 1px;
	content: "";
	margin: 0px auto;
}
.mainmenue > li > a#close::after {
	display: none;
}
/*.mainmenue > li > ul > li > a::after {
    display: block;
    background-color: #ffffff;
    width: 40%;
    height: 1px;
    content: "";
    margin: 0px auto;
}*/
#logo{
	float:left;
}	
.kontaktlink{
	float:right;
	height: 60px;
}	
#phone{
	padding-top:15px;
}
span.smalldevices{
	display:none;
	font-size:16px;
	position:relative;
	bottom:5px;
}
#menu {
	z-index: 1000;
}
#menu, #topnavclose:target #menu{
	position:relative;
	top:0px;
	text-align:center;
	height:0px;
	overflow:hidden;
}
#topnav:target #menu{
	height:auto;
	transistion:all;
	transition-duration: 1s;
	width:100%;
	position: relative;
	top:-60px;
}
#topnav:target #open{
	display:none;
}
#topnavclose {
	text-align:center;
}
/*Navigation Ende*/
/*Tabellen*/
table {
	line-height: 26px;
	font-size: inherit;
	width:100%;
	border:0;
	border-collapse: collapse;
}
td, th {
	padding: 5px
}
thead th {
	text-transform: uppercase;
	border-bottom: 2px solid var(--text);
	background-color:var(--highlight);
}
tr:nth-of-type(odd){
	background-color:var(--backcolor2);
}
td:first-of-type{
	border-right:1px solid var(--text);
}

table.vergleich thead th {
	text-transform: none;
	text-align: left;
}
table.vergleich thead th span {
	-webkit-hyphens: auto;
}

table.vergleich td {
	font-size: 14px;
}
.vergleich tbody th {
	border-right:1px solid var(--text);
}
.vergleich td:first-of-type {
	border:none;
	text-align: center;
}

@media screen and (max-width: 1024px) {
	table.vergleich thead th {
		border-left: 1px solid #000;
	}	
	table.vergleich thead th span {
		writing-mode: vertical-rl;
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		-webkit-hyphens: none;
	}
	table.vergleich thead th {
		text-align: center;
		vertical-align: bottom;
	}
}
	
@media screen and (max-width: 800px) {	
	
	table.vergleich, table.vergleich tbody, table.vergleich tr {
		display: block;
	}
	table.vergleich thead {
		display: none;
	}
	table.vergleich tbody th {
		text-transform: uppercase;
		border-bottom: 2px solid var(--text);
		background-color:var(--highlight);
	}
	table.vergleich td::before {
		font-weight: bold;
	}
	table.vergleich td:nth-child(2)::before {
		content: "Benutzerfreundlichkeit: ";
		font-weight: bold;
	}
	table.vergleich td:nth-child(3)::before {
		content: "Installationsaufwand: ";
	}
	table.vergleich td:nth-child(4)::before {
		content: "Rechtekonzept: ";
	}
	table.vergleich td:nth-child(5)::before {
		content: "Erweiterbarkeit: ";
	}
	table.vergleich td:nth-child(6)::before {
		content: "Design/ Themes: ";
	}
	table.vergleich td:nth-child(7)::before {
		content: "E-Commerce fähig: ";
	}
	.vergleich td:first-of-type {
		text-align: left;
	}
	tbody th, tbody td {
		display: block;
	}
}
/*Tabellen Ende*/

/*Listen*/
main li{
	color:inherit;
}
main ul, main ol {
	list-style-position: outside;
	line-height: 30px;
	margin:10px 0px 20px 0px;
	padding-left: 18px;
}
main ul {
	list-style-type: circle;
}
ul.checkicon {
	list-style-image:url('../img/icon_check.png');
}
.teaser ul {
	list-style-position: inside;
	padding-left: 0px;
}
.nostyle {
	list-style: none;
	line-height: 50px;
	text-transform:uppercase;
	margin:10px 0;
}
.nostyle a{
	font-size:16px;
}
/*Listen Ende*/

/*Formular*/
form {
	line-height: inherit;
	padding:15px;
	border:1px solid var(--text);
	color:var(--text) !important;
	margin:0px 0 20px 0;
}
fieldset {
	font-size:inherit;
	line-height: 26px;
	border:0;
}
legend {
	font-size: inherit;
	margin-bottom:10px;
	text-transform: uppercase;
	font-family: 'montserratbold';
	border:1px solid var(--text);
	color:var(--text);
	width:100%;
	padding:15px;
}
label{
	display:inline-block;
	margin-top:15px;
}
input[type="checkbox"], input[type="radio"]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="checkbox"], input[type="radio"] {
	width: 16px;
	height: 16px;
	border-radius:50%;
	position: relative;
	top:1px;
	border:1px solid #000;
	/*background-color:#fff;*/
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
	background-image:url("../img/icon_check.png");
	background-position:center center;
	background-repeat:no-repeat;
	border:0;
	background-color:transparent;
}
input[type="text"], input[type="email"], input[type="tel"], select {
	display: block;
	width: 100%;
	border: 1px solid;
	font-size: inherit;
	line-height: 30px;
	padding: 5px;
	margin-top: 5px;
	background-color:transparent;
	outline: none ;
}
input[type="text"]:focus:invalid, input[type="email"]:focus:invalid, input[type="tel"]:focus:invalid, input[type="text"].fehler, input[type="email"].fehler, input[type="tel"].fehler {
	-webkit-box-shadow: 0px 0px 4px 1px rgba(255,0,0,1);
	-moz-box-shadow: 0px 0px 4px 1px rgba(255,0,0,1);
	box-shadow: 0px 0px 4px 1px rgba(255,0,0,1);
}
input:focus{
	background-color:rgba(255,255,255)
}
input:focus::-webkit-input-placeholder, input:focus::-moz-placeholder, input:focus::placeholder{
	color:transparent;
}
select {
	padding: 9px 0;
}
select.breite{
	width:20%;
}
::-webkit-input-placeholder, ::-moz-placeholder , ::placeholder  {
	opacity: 0.7;
}
textarea {
	resize: vertical;
	font-family: inherit;
	padding:3px;
	border:1px solid var(--text);
	/*background-color:rgba(0,0,0,0.16);*/
	outline:none;
}
.checkboxesvertical {
	margin-bottom:15px;
}
.checkboxesvertical input{
	margin-top:15px;
}
.pflicht {
	display: block;
}
#submit{
	font-size: inherit;
	text-transform: uppercase;
	width:100%;
}
.captchaQuest {
	margin: 10px 0px;
}
.captchaItem {
	float: left;
	margin-right: 15px;
	text-align: center;
}
.captchaItem input {
	margin: 5px auto;
	width: 16px;
	display: block;
}
.fehler {
	color: #ff0000;
}
/*Formulare Ende*/
/*Referenzen*/
.referenzen p {
	text-align: center;
}

/*Sitemap*/
.sitemaphead {
	font-size: 20px;
	font-family: 'montserratbold';    
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	border-bottom: 1px solid;
	padding: 10px 0;
}
.sitemap ul{
	list-style: none;
	text-transform:uppercase;
	margin:0;
	text-decoration: none;
	list-style-image: url("../img/icon_pfeil.png");
	list-style-position: inside;
}
.sitemap li{
}
.sitemap a {
	text-decoration: none;
}
/*Sitemap Ende*/

/*-------Accordion-------*/
.custom-accordion {
	background: #202020;
	color: #FFFFFF;
	padding-bottom: 2rem;
}
.custom-accordion > .item {
	padding: 1rem 2rem;
	margin: 0 auto;
	max-width: 98%;
}
.custom-accordion > .item:last-of-type {
	background: #b094a7;
	text-align: center;
}
.custom-accordion > .item:last-of-type > .icon {
	font-size: 32px;
}
.custom-accordion > .item:nth-of-type(6) {
	padding-bottom: 2rem;
}
.custom-accordion > .item > .icon {
	color: #ffffff;
	font-size: 12px;
}
.custom-accordion > .item:first-of-type > .icon::before, .custom-accordion > .item:last-of-type > .icon::before {
	display: none;
}
.custom-accordion > .item > .title {
	font-size: 32px;
}
.custom-accordion > .item > .title > .text {
	padding-bottom: 10px;	
}
.heart-icon {
	color: #ffffff;
	font-size: 3rem;
	transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
}
.icon-last {
	font-size:16px; 
	line-height:30px;
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
	.custom-accordion > .item > .icon {
		font-size: 26px;
	}
}
@media screen and (min-width: 1000px) {
	.custom-accordion > .item > .icon {
		font-size: 32px;
	}
}
@media screen and (min-width: 1200px) {
	.custom-accordion > .item {
		width: 10%;
	}
}
@media screen and (min-width: 800px) and (min-height: 270px) {
	.custom-accordion {
		display: table;
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		min-height: 450px;
		max-height: 1000px;
		overflow: hidden;
		padding-bottom: 0;
	}
	.custom-accordion > .item {
		display: table-cell;
		position: relative;
		height: 100%;
		width:14%;
		padding: 2rem 1rem;
		text-align: center;
		transform-origin: 0 50%;
		transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
	}
	.custom-accordion > .item:hover:not(:last-of-type) {
		transform: scaleX(2) translateX(-1px);
		background: #b094a7;
		border-color: transparent;
	}
	.custom-accordion > .item:hover + .item {
		opacity: 0.1;
	}
	.custom-accordion > .item:hover + .item:last-of-type {
		opacity: 0.1;
		background: #b094a7;
	}
	.custom-accordion > .item:not(:last-of-type) {
		border-right: 1px solid #ffffff;
	}
	.custom-accordion > .item:last-of-type {
		background: #b094a7;
		border-radius: 0;
	}
	.custom-accordion > .item:last-of-type .heart-icon {
		font-size: 6rem;
	}
	.custom-accordion > .item:hover:last-of-type .heart-icon {
		transform: scale(2);
	}
	.custom-accordion > .item:last-of-type > .title {
		transform: rotate(0) translateX(-50%) translateY(-2.5rem);
		padding: 0;
		text-align: center;
	}
	.custom-accordion > .item:last-of-type > .content {
		opacity: 1;
		transform: translateX(-50%) translateY(-50%);
	}
	.custom-accordion > .item:hover:not(:last-of-type) > .icon {
		transform: scaleX(0.5);
	}
	.custom-accordion > .item:hover:not(:last-of-type) > .title {
		transform: scaleX(0.5) translateX(-50%);
		background: #202020;
		text-align: center;
		font-size: 0.9rem;
		line-height:1.5rem;
	}
	.custom-accordion > .item:hover:not(:last-of-type) > .title > .text {
		transform: translateX(-50%);
		left: 50%;
	}
	.custom-accordion > .item:hover:not(:last-of-type) > .content {
		opacity: 1;
	}
	.custom-accordion > .item > .icon {
		font-weight: 700;
		transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
		color: #FFFFFF;
	}
	.custom-accordion .icon-last img {
		padding-bottom: 40px;
	}
	.custom-accordion > .item > .icon::before{
		display: none;
	}
	.custom-accordion > .item > .title {
		position: absolute;
		bottom: 0;
		left: 50%;
		height: 1.5rem;
		width: 200%;
		text-align: left;
		transform-origin: 0 50%;
		transform: rotate(-90deg);
		transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
		font-size: 1rem;
	}
	.custom-accordion > .item > .title > .text {
		position: absolute;
		left: 2rem;
		bottom: 0;
		white-space: nowrap;
		transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
		padding-bottom: 0px;
	}
	.custom-accordion > .item > .content {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200%;
		height: auto;
		transform: translateX(-50%) translateY(-50%) scaleX(0.5);
		transition: all 0.3s cubic-bezier(0.8, 0.16, 0.42, 0.89);
		opacity: 0;
		padding: 1rem;
		pointer-events: none;
		hyphens: auto;
	}
}
/*Accordion Ende*/

/*Footer*/
footer {
	padding: 40px 0 10px 0;
}
footer nav{
	margin-bottom:15px;
	text-transform:uppercase;
}	
footer li{
	display: inline-block;
	border-right:1px solid ;
	padding:0 5px;
}	
footer li:last-of-type{
	border:none;
}
footer a{
	font-size:16px;
}
/*Footer Ende*/

/*Lightbox*/
.lboff {display:none}

@media screen and (max-width: 799px) {
	.lbon {display:none}
	.lboff {display:block}
}
/**/

/*back to top*/
#back-top {
	position:fixed;
	bottom:20px;
	right:15px;
	display:none;
	z-index:500;
}
#back-top a{
	text-decoration:none;
	font-size:20px;
	background-color:var(--text);
	color:#fff;
	border-radius: 50%;
	display: inline-block;
	width: 40px;
	height: 40px;
	text-align: center;
	padding-top:6px;
}
/*back to top Ende*/

/* ChatWhatsApp */
#chatwhatsapp {
	position:fixed;
	bottom:60px;
	right:15px;
	opacity: 0;
	z-index:500;
}
.chatshow {
	opacity: 1 !important;
	transition: all 2s ease-in 4s;
}

/*Animationen*/

.cont_animation div {
	overflow: hidden;
}
.benefit_headline_top {
	color: #ffffff;
}
.benefit_subline, .benefit_headline {
	position: relative;
	left:-600px;
}
.benefit_subline:before {
	content:url("../img/icon_pfeil.png");
	padding-right:3px
}

.benefit_text {
	display: none;
}

.ani_benefit_hd {
	-webkit-animation-name: appear;
            animation-name: appear;
	-webkit-animation-delay:0.3s;
            animation-delay:0.3s;
	-webkit-animation-duration:0.7s;
            animation-duration:0.7s;
	-webkit-animation-timing-function:ease-out;
            animation-timing-function:ease-out;
	-webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
}
.ani_benefit_text {
	display: block;
	-webkit-animation: scale-in-ver-top 0.5s 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-ver-top 0.5s 1.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.icon_benefits {
	position: relative;
	top: 4px;
	margin-right: 5px;
}
@-webkit-keyframes scale-in-ver-top {
	0% {
	-webkit-transform: scaleY(0);
            transform: scaleY(0);
	-webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
	opacity: 1;
	}
	100% {
	-webkit-transform: scaleY(1);
            transform: scaleY(1);
	-webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
	opacity: 1;
	}
}
@keyframes scale-in-ver-top {
	0% {
	-webkit-transform: scaleY(0);
            transform: scaleY(0);
	-webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
	opacity: 1;
	}
	100% {
	-webkit-transform: scaleY(1);
            transform: scaleY(1);
	-webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
	opacity: 1;
	}
}

#umsatzanimation{
	width:70px;
	height: 50px;
	overflow: hidden;
	margin-left:18px;
	position: relative;
}

#umsatzanimation p{
	display:inline-block;
	position: relative;
	top:15px;
	left:-99px;
	padding-left:5px;
	width:0;
}

#umsatzicon {
	width: 40px;
	height: auto;
	display: inline-block;
	position: absolute;
	background-color:var(--backcolor2);
	z-index: 5;
}
#umsatzanimation:hover{
	width:100%;
	transition: width;
	transition-duration: 2s;
}

#umsatzanimation:hover p{
	left:50px;
	top:15px;
	transition: all;
	transition-duration: 2s;
	width:auto;
}



/*laufbalken*/
.prozent{
	float:right;
	width:70px;
	text-align: right;
	padding-right:15px;
}
.skill1, .skill2, .skill3 {
	border-radius: 0;
	background: #72952b;
	height: 8px;
	display: inline-block;
	margin: 10px 0 30px 0;
}
.hundert {
	-webkit-animation-name: fullgrowing;
    		animation-name: fullgrowing;
    -webkit-animation-duration: 3s;
    		animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    		animation-fill-mode: forwards;
    width: 0;
}
	
.siebzig{
	-webkit-animation-name: growing;
			animation-name:growing;
	-webkit-animation-duration: 3s;
			animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	width:0;
}
/*laufbalken ende*/	

@-webkit-keyframes fullgrowing{
	0%{width:0px}
	100%{width:calc(100% - 70px)}
}
@keyframes fullgrowing{
	0%{width:0px}
	100%{width:calc(100% - 70px)}
}
@-webkit-keyframes growing{
	0%{width:0px}
	100%{width:calc(70% - 70px)}
}
@keyframes growing{
	0%{width:0px}
	100%{width:calc(70% - 70px)}
}
@-webkit-keyframes appear {
	0%{left: -600px;}
	100%{left:0;}
}
@keyframes appear {
	0%{left: -600px;}
	100%{left:0;}
}
/*Animationen Ende*/

@media screen and (min-width: 400px){
	
	#kreisdiagramm_oben, #kreisdiagramm_unten{
		padding-left:20px;
	}
}
@media screen and (min-width: 480px) and (max-width:550px) and (orientation:landscape){
	#start{
		height:100vh;
		background-color:var(--backcolor1);
		background-image:url("../img/header_home.jpg") ;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:left -180px top;
	}
}

/*tablet*//*tablet*//*tablet*/
@media screen and (min-width: 600px) {
	header{
		background-position:right top;
	}
	.headline_startseite{
		/*position:relative;
		top:150px;*/
	}
	.headline_startseite h1{
		font-size:36px;
		line-height: 46px;
	}
	header .contentwrapper {
		background: none;
		padding-bottom: 0px;
	}
    
	.headline{
		margin-top:35%;
	}		
	.sub_headline{
		padding-top:150px;
	}
	.beitrag {
		font-size: 32px;
		line-height: 42px;
		letter-spacing: 8px;
	}
	.scrolldown:link , .scrolldown:visited {
		display: block;
		width:50px;
		height:50px;
		background-image:url("../img/icon_sprite_scrolldown.png");
		background-repeat:no-repeat;
		background-position:top left;
		margin:40px auto;
	}   
	#webshopVideo, #seoVideo {
		width: 100%;
		height: auto;
	}
	
}

@media screen and (min-width: 600px) and (orientation: landscape) {
	.smd {
		display:none;
	}
}
@media screen and (max-width: 800px) and (orientation: landscape) {
    
    #mainstart .vierzig {
	max-width: 700px;
	padding: 40px 10px 60px 10px;
}
    
	#start{
		background-position: top right 200px;
	}
}


@media screen and (min-width: 800px) and (orientation: landscape){
	.dreigeflext div{
		-ms-flex-preferred-size:44%;
		flex-basis:44%;
	}		
	.dreigeflext ul{
		-ms-flex-preferred-size:32%;
		flex-basis:32%;
	}	
	.sectionheader img{
		min-height:350px;
		min-width: 2000px;
	}
}

@media screen and (min-width: 800px){
	
	
	h1{
		font-size:36px;
		line-height:36px;
		letter-spacing:4px;
	}
	h2, h3, h4 {
		letter-spacing:4px;
	}
	.dreigeflext.referenzen div {
		-ms-flex-preferred-size:44%;
		flex-basis:44%;
	}
	.sectionheader img{
	    min-height:350px;
	    min-width: 2000px;
	}
	.button {
		min-width: 27%;
		max-width: max-content;
	}
	.smd {
		display:none;
	}
    
	#adwords{
		background-position: left -550px center;
	}
    
	.flexbox-logo-images > * { width: 50%;}

 
}


@media screen and (min-width: 800px) and (orientation:landscape){
	.dreigeflext div, .zweigeflext div, .zweigeflext_end div{
		-ms-flex-preferred-size:48%;
        flex-basis:48%;
	}
	.headline_startseite {
		background: none;
		padding-bottom: 0px;
		position:relative;
		top:150px;
	}
    
#webdesign{
	height:auto;
}
    
}





@media screen and (min-width: 900px) {
    
.schritte{
    font-size:40px;
    height: 74px;
    width:74px;
    border-radius:50%;
    margin-bottom: 40px;
    padding-top:27px;
}   
    
.schritte::after, .schritte::before{
    content:"";
    height: 1px;
    width:50%;
    display: inline-block;
    position: absolute;
    left:50%;
    z-index:-1;
    background-color:var(--highlight);
    top:40px;
}

.schritte::before{
    left:0;
}  
    
.viertel{
        flex-basis:25%;
    } 
}

/*desktop*//*desktop*//*desktop*/
@media screen and (min-width: 1024px){
	.headline_startseite {
		background: none;
		padding-bottom: 0px;
		position:relative;
		top:150px;
	}
	
	.headline_startseite h1{
		font-size:62px;
		line-height:62px;
    	margin-top: 15%;
	}
	
	h1{
		font-size:52px;
		line-height:52px;
		letter-spacing:4px;
	}
	h2, h3, h4 {
		letter-spacing:4px;
	}
	.dreigeflext div, .zweigeflext div, .zweigeflext_end div{
		-ms-flex-preferred-size:48%;
        flex-basis:48%;
	}
    
	.flexbox-logo-images > * { width: 25%;}

    
}   
    
@media screen and (min-width: 1300px){
	.headline_startseite h1{
		font-size:72px;
		line-height:72px;
	}   
	.subline{
		text-transform:uppercase;
		font-size:26px;
	}
	.headline{
		text-align:right;
		color:#fff;
		margin-top:25%;
	}
	.beitrag {
		font-size: 36px;
	}
	.hosting_subpage{
		margin-top:60px;
	}
	.sectionheader img {
		width: 100%;
	}
	/*flexboxen*/
	.zweigeflext_breit div{
			-ms-flex-preferred-size:50%;
			flex-basis:48%;
	}  
	.dreigeflext div, .dreigeflext.referenzen div{
		-ms-flex-preferred-size:27%;
        flex-basis:27%;
	}
	.zweigeflext_end{
	   justify-content:flex-end;
	}
	.contentwrapper.dreigeflext.teaser {
		margin-bottom: 40px;
	}
 	#corporate{
    	background-position: left -550px bottom -250px;
	}
	#entwicklung, #programmierung{
        background-position:left -550px bottom;
	}
	#googlemaps{
		background-position:right 400px bottom;
	}		
	#impressum, #kontakt{
		background-position:left -550px top;
	}
	#start{
		background-image:url("../img/header_home_neu.jpg");
		background-size: cover;
		background-position: top right 600px;
	}
	#webdesign {
		margin-left: 40px;
	}
	main ul.fifty{
		max-width:50%;
	}

	/*navigation*/
	#topnav li a#close, #topnav li a#open{
		display:none;
	}
	#menu{
		height: 60px;
		width:auto;
		overflow:inherit;
		position:static;
		display: inline-block;
		margin: 0 auto;
	}
	#open{
		display:none;
	}
	.mainmenue > li > a::after {
    	display: none;
	}
	#topnav{
		text-align: center;
	}
	#topnav li :focus .submenue, #topnav li:hover .submenue, #topnav li:active .submenue{
		display:block;
		position: absolute;
		top: 60px;
		left: 0;
		text-align:left;
		background-color:var(--text);
	}
	#topnav a, .mainmenue > li{
		float:left;
		position:relative;
	}
	.mainmenue li{
		font-family: 'montserratregular';
	}	
	.submenue {
	   display: none;
	}
	.submenue a{
	   width: 100%;
	}
	#topnav.sticky{
		position:fixed;
		top:0;
		z-index: 500;
	}
}


#sec_kontakt form {
	border:none;
	padding:0px;
}

#sec_kontakt .zweigeflext div:first-child, #sec_kontakt .zweigeflext div:nth-child(2) {
	flex-basis: 100%;
}

#sec_kontakt input[type="text"], #sec_kontakt input[type="tel"], #sec_kontakt input[type="email"] {
	margin-top:0px;
	margin-bottom:10px;
	font-size:inherit;
	font-family: 'montserratregular', Arial, sans-serif;
	background-color: #ffffff;
}
#sec_kontakt textarea {
	font-size:inherit;
	padding:5px;
	width:100%;
	height:146px;
}
#sec_kontakt input[type="submit"] {
	appearance: none;
	text-transform: none;
	font-family: 'montserratregular', Arial, sans-serif;
}
#sec_kontakt .cont_input, #sec_kontakt .cont_textarea {
	width:100%;
}
#sec_kontakt #nachname {
	display:none;
}

@media screen and (min-width: 800px) {
	#sec_kontakt .cont_input, #sec_kontakt .cont_textarea {
		float:left;
		width:48%;
	}
	#sec_kontakt .cont_input {
		margin-right:2%;
	}
}
@media screen and (min-width: 1024px) {
	#sec_kontakt .zweigeflext div:first-child {
		flex-basis: 31%;
	}
	#sec_kontakt .zweigeflext div:nth-child(2) {
		flex-basis: 65%;
	}
}