@font-face {
	font-family: 'Ubuntu';
	font-weight:300;
	src: url("/static/fonts/ubuntu/Ubuntu-Light.ttf");
}

@font-face {
	font-family: 'Ubuntu';
	font-weight:300;
	font-style:italic;
	src: url("/static/fonts/ubuntu/Ubuntu-LightItalic.ttf");
}

@font-face {
	font-family: 'Ubuntu';
	font-weight:400;
	src: url("/static/fonts/ubuntu/Ubuntu-Regular.ttf");
}

@font-face {
	font-family: 'Ubuntu';
	font-weight:400;
	font-style:italic;
	src: url("/static/fonts/ubuntu/Ubuntu-Italic.ttf");
}

@font-face {
	font-family: 'Ubuntu';
	font-weight:500;
	src: url("/static/fonts/ubuntu/Ubuntu-Medium.ttf");
}

@font-face {
	font-family: 'Ubuntu';
	font-weight:500;
	font-style:italic;
	src: url("/static/fonts/ubuntu/Ubuntu-MediumItalic.ttf");
}

@font-face {
	font-family: 'Ubuntu';
	font-weight:700;
	src: url("/static/fonts/ubuntu/Ubuntu-Bold.ttf");
}

@font-face {
	font-family: 'Ubuntu';
	font-weight:700;
	font-style:italic;
	src: url("/static/fonts/ubuntu/Ubuntu-BoldItalic.ttf");
}

*{
	border:none;
	outline:none;
}


/* Generelle Einstellungen */
body{
	margin:0;
	padding:0;
	font-family:'Ubuntu', sans-serif;
	font-weight:lighter;
}

a{
	color:black;
	text-decoration:none;
}

#page p{
	font-size:18px;
	line-height:150%;
	margin:15px 0;
}

.clear{
	clear:both;
}

#content a{
	color:#ff9c00;
	text-decoration:none;
}

#content a:hover{
	text-decoration:underline;
}

#content .button,
#kacheln .contenttext p a,
#kacheln .bu a{
	background:#dcd6cd;
	padding:8px 14px 8px 8px;
	text-decoration:none;
	display: inline-block;
	position:relative;
	color:black;
}

#content .button:hover,
#kacheln .contenttext p a:hover,
#kacheln .bu a:hover{
	background:#ff9c00;
	color:white;
	text-decoration:none;
}

#content .button:after,
#kacheln .contenttext p a:after,
#kacheln .bu a:after{
	content:"";
	width:0px;
	height:0px;
	position:absolute;
	right:0;
	bottom:0;
	border-bottom: 15px solid white; 
	border-left: 15px solid transparent;
}

#button{
	position:relative;
}

#button:after{
	content:"";
	width:0px;
	height:0px;
	position:absolute;
	right:0;
	bottom:0;
	border-bottom: 10px solid white; 
	border-left: 10px solid transparent;
}

.start section  a{
	color:black;
	text-decoration:none;
}

.start section a:hover{
	color:white;
	text-decoration:underline;
}

h1{
	font-weight:lighter;
	line-height:35px;
	margin:19px 0 5px;
	font-size:29px;
}

h1 em{
	font-size:22px;
	font-style:normal;
	line-height:28px;
}

h2{
	font-weight:lighter;
	font-size:1.4em;
	margin:40px 0 15px;
}

h3{
	margin: 30px 0 0;
	font-size: 19px;
	font-weight: 500;
}

#content h1 a, #content h2 a, #content h3 a{
	text-decoration:none;
}

body div.cms-editor-block{
	position:static;
}

/* Page */


#page{
	position:relative;
	height:auto;
	background:#f9f6f6;
	width:100%;
	padding:20px;
	margin:0;
	box-sizing:border-box;
	min-height: 100vh;
	overflow: auto;
	
	/* Responsive derzeit inaktiv */
	min-width:1230px;
}

#wrapper{
	background: white;
	position:relative;
	width:100%;
	max-width:1400px;
	margin:0px auto;
	position:relative;
}

#wrapper:after{
	content:"";
	width:0px;
	height:0px;
	position:absolute;
	right:0;
	bottom:0;
	border-bottom: 60px solid #f9f6f6; 
	border-left: 60px solid transparent;
}


img#page_ecke{
	position:absolute;
	right:0;
	bottom:0;
}


/* Headerbereich */

#header{
	height:175px;
	position:relative;
}


/* Logo */

#logo{
	position:relative;
	left:38px;
	top:45px;
	font-weight:300;
	display: table;
}

#logo h5{
	font-size:38px;
	color:#ff9c00;
	font-weight:300;
	margin:0 0 5px;
	padding:0;
}

#logo p{
	font-size:20px;
	line-height:20px;
	position:relative;
	display:block;
	margin:0;
	padding-left: 41px;
	height:40px;
}

#logo p:before{
	content:"";
	width:30px;
	height:30px;
	position:absolute;
	left:3px;
	top:5px;
	background-image:url("/static/img/hafti.svg");
	background-repeat:no-repeat;
	-webkit-background-size: 30px 30px;           /* Safari 3.0 */
	     -moz-background-size: 30px 30px;           /* Gecko 1.9.2 (Firefox 3.6) */
	       -o-background-size: 30px 30px;           /* Opera 9.5 */
	          background-size: 30px 30px;   
}

#logo p span{
	color:#ff9c00;
}

/* Navigation */

nav{
	background:#dcd6cd;
	position:relative;
	height:38px;
}

nav ul{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	height:38px;
	padding:0px 32px;
	width:100%;
	box-sizing:border-box;
	margin: 0;
}

nav ul li{
	list-style-type:none;
	font-weight:lighter;
	padding:0px;
	margin-right:20px;
	height:38px;
}

nav ul li:last-of-type{
	margin-right:0;
}

nav ul li a{
	padding:10px 8px;
	background:#dcd6cd;
	font-size:17px;
	height:18px;
	display:block;
}

nav ul li a:hover{
	background:#ff9c00;
	color:white;
}

/*nav ul li:last-child{
	width:100%;
	height:0px;
	visibility:hidden;
	padding:0px;
}*/

a.aktiv {
	text-decoration:underline;
}

nav ul li ul{
	display:none;
	position:absolute;
	text-align:left;
	z-index:200;
	margin:0;
	background:#dcd6cd;
	width:auto;
	top:38px;
	padding:0;
}

nav ul li:hover ul{
	display:block;
}

nav ul li ul li{
	display:list-item;
	background:none;
	width:100%;
	margin-right:0px;
	padding:0px 0px 2px 0;
	height:32px;
	background:#dcd6cd;
	min-width:141px;
}

nav ul li ul li:last-child{
	width:auto;
	height:auto;
	visibility:visible;
	padding:0px 0px 0px 0px;
}

nav ul li ul li a{
	height:16px;
	padding:10px;
	display:block;
}

#menuTop{
	width:100%;
	display:flex;
	justify-content:flex-end;
	position:absolute;
	/*top:0;*/
	right:0px;
}

#menuTop ul,
#menuFooterResponsive ul{
    list-style-type: none;
    background-color: #f0ece6;
    display: flex;
    padding: 0px;
    margin: 0px;
}

#menuTop ul li,
#menuFooterResponsive ul li{
	margin:0;
}

#menuTop ul li a,
#menuFooterResponsive ul li a{
	padding: 10px 15px;
	display:block;
	font-size: 14px;
}

#menuTop ul li a:hover,
#menuFooterResponsive  ul li a:hover{
	background-color:#ff9c00;
	color:white;
}

/* Content */

#content{
	width:100%;
	margin:0;
	padding:60px 40px 40px 40px;
	box-sizing:border-box;
}

.start #content{
	background:url(../img/einleitungsStreifen_ecke.png) no-repeat;
	background-position:left bottom;
}

div#spalteGesamt{
	width:100%;
	float:left;
}

section{
	float:left;
	width:75%;
	padding-right:100px;
	box-sizing:border-box;
}

aside{
	float:left;
	width:25%;
}

#kacheln{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

#kacheln .contentelement{
	width:50%;
	padding-right:10px;
	padding-left:0px;
	box-sizing:border-box;
	margin:10px 0 20px;
}

#kacheln .contenttext p{
	padding-right:20px;
}

#kacheln .contentelement:nth-of-type(even){
	padding-left:10px;
	padding-right:0px;
}

#kacheln .contentelement h1{
	position:relative;
	padding-left:26px;
	margin: 0 0 10px;
	width:100%;
	box-sizing: border-box;
}

#kacheln .contentelement h1:before{
	content:"";
	width: 16px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 12px;
	background-image:url("/static/img/hafti.svg");
	background-repeat:no-repeat;
	-webkit-background-size: 18px 18px;           /* Safari 3.0 */
	     -moz-background-size: 18px 18px;           /* Gecko 1.9.2 (Firefox 3.6) */
	       -o-background-size: 18px 18px;           /* Opera 9.5 */
	          background-size: 18px 18px;   
}

#kacheln .contentbild .bu{
	padding-right:0px;
}

#kacheln .contentbild .bu p{
	padding-right:20px;
}

#kacheln .contentbildContainer{
	margin-bottom:15px;
}


#content ul{
	padding:0px;
	margin:15px 0px 15px 16px;
	list-style-image:url(../img/list-style-image.png);
	line-height:160%;
}

#content ul li{
	margin:0px 0px 7px 0px;
}

.download{
	margin-right:20px;
	margin-bottom:10px;
	padding-top:15px;
	margin-top:30px;
}

.download:after{
	content:"";
	display:table;
	clear:both;
}

.download > a{
	float:left;
	display:block;
	width:70px;
	height:70px;
	background:url(../img/pdf-icon.png);
	margin-right:12px;
	color:black;
}

.download .bu{
	float:left;
}

.download .bu a{
	color:black !important;
}

.download .bu p{
	padding-top:2px;
	padding-left:0px !important;
	color:black;
	font-style:normal !important;
}

.download .bu p::before {
	display:none !important;
}

/* SpalteLinks */

aside .contenttext{
	margin-bottom:30px;
}

.contentbild{
	margin-top:35px;
}

.contentbild img{
	width:100%;
	height:auto;
	display:block;
}

.contentbild.hochformat img{
	width:auto;
	height:auto;
	max-width:100%;
}

.contentbild .contentbildContainer{
	position:relative;
	display: inline-block;
	width:100%;
}

.contentbild.hochformat .contentbildContainer{
	width:auto;
}

.contentbild .contentbildContainer:after{
	content:"";
	width:0px;
	height:0px;
	position:absolute;
	right:0;
	bottom:0;
	border-bottom: 40px solid white; 
	border-left: 40px solid transparent;
}


.mitgliedschaft,
.zertifikat{
	float:left;
	width:50%;
	margin:0;
	min-height:100px;
	padding-top:15px;
}

.zertifikat .downloadicon{
	float:left;
	margin-right:20px;
	width:70px;
}

.zertifikat .bu{
	width: 330px;
	float:left;
}

.zertifikat .bu a,
.zertifikat .bu p{
	margin:0 !important;
	padding:0 !important;
}

#content .zertifikat ul{
	margin-top:0;
}


.mitgliedschaft .contentbildContainer{
	float:left;
	margin-right:20px;
	width:70px;
	height:100%;
	position:static;
	margin-top:10px;
}

.mitgliedschaft .contentbildContainer img{
	width:100%;
	height:auto;
}

.mitgliedschaft .bu{
	width: 330px;
	float:left;
}

.mitgliedschaft .bu p{
	padding-left:0 !important;
	margin-top:0 !important;
	font-style:normal !important;
}

.mitgliedschaft .bu p:before{
	display:none;
}



/* SpalteRechts */

aside h2{
	color: black;
}

aside h3{
	color: black;
	font-size:18px;
	font-weight:lighter;
	margin-bottom:5px;
	margin-top:15px;
	line-height:140%;
}

#page aside p{
	margin-top:5px;
	font-size:16px;
}

#page aside li{
	font-size:16px;
}

#page section li{
	font-size:18px;
}

aside .gleicheHoehe ul{
	margin-top:73px;
}

#page  aside .zitat p{
	display:block;
	width:100%;
	font-style:italic;
	font-size:20px;
	font-weight:300;
	margin:50px 0 10px;
	text-align:center;
	padding: 0 5px;
	position:relative;
	box-sizing:border-box;
}

#page  aside .zitat p:before{
	content:"";
	width:22px;
	height:22px;
	position:absolute;
	left:-20px;
	bottom:3px;
	background-image:url("/static/img/quote_start.svg");
	background-repeat:no-repeat;

	-webkit-background-size: 22px 22px;           /* Safari 3.0 */
	     -moz-background-size: 22px 22px;           /* Gecko 1.9.2 (Firefox 3.6) */
	       -o-background-size: 22px 22px;           /* Opera 9.5 */
	          background-size: 22px 22px; 
}

#page  aside .zitat p:after{
	content:"";
	width:22px;
	height:22px;
	position:absolute;
	right:-20px;
	top:0px;
	background-image:url("/static/img/quote_end.svg");
	background-repeat:no-repeat;
	-webkit-background-size: 22px 22px;           /* Safari 3.0 */
	     -moz-background-size: 22px 22px;           /* Gecko 1.9.2 (Firefox 3.6) */
	       -o-background-size: 22px 22px;           /* Opera 9.5 */
	          background-size: 22px 22px; 
}

aside .zitat h4{
	text-align:right;
	font-weight:300;
	margin:0;
}

/* Kontaktformular */

textarea{
	width:600px;
	height:200px;
	resize: none;
	padding: 10px;
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: lighter;
	border:1px solid #dcd6cd;
	margin-top:5px;
	box-sizing:border-box;
	line-height:140%;
}

div#button{
	display:inline-block;
}

input#absenden{
	padding:8px 22px 8px 10px;
	font-size:18px;
	font-weight:lighter;
	font-family:'Ubuntu', sans-serif;
	border:none;
	cursor:pointer;
	position:relative;
	background-color:#dcd6cd;
	display:block;
	width:200px;
	margin-top:20px;
}

input#absenden:hover{
	background-color:#ff9c00;
	color:white;
}

input{
	min-width:150px;
	min-height:16px;
	padding: 6px;
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: lighter;
	border:1px solid #dcd6cd;
	margin-top:5px;
}

label.pflichtfeld:after{
	content:"*";
	color:#ff9c00;
	margin-left:3px;
}

#page .bu p{
	margin-top:5px;
	font-size:18px;
	font-style:italic;
	position:relative;
	padding-left:22px;
	padding-right: 35px;
}

#kacheln .bu p{
	padding:0;
	margin: 15px 0;
	font-style: normal;
}

#kacheln .bu p:before{
	display:none;
}

#page .bu p:before{
	content:"";
	width:14px;
	height:14px;
	position:absolute;
	left:0;
	top:5px;
	background-image:url("/static/img/hafti.svg");
	background-repeat:no-repeat;
	-webkit-background-size: 14px 14px;           /* Safari 3.0 */
	     -moz-background-size: 14px 14px;           /* Gecko 1.9.2 (Firefox 3.6) */
	       -o-background-size: 14px 14px;           /* Opera 9.5 */
	          background-size: 14px 14px;   
}

/* Footer */

footer{
	background:#dcd6cd;
	margin:0;
	padding:0;
	font-size:0.9em;
	margin-top:50px;
}

footer:after{
	clear:both;
	display:table;
	content:"";
}

#page footer p{
	float:left;
	margin:0px 0px 0px 40px;
	padding:10px 0;
	line-height:120%;
	display:block;
	height:16px;
	font-size:15px;
}

footer ul{
	float:right;
	margin:0px 100px 0px 0px;
}

footer ul li{
	display:inline;
	margin-left:15px;
	padding:10px 0;
}

footer ul li a{
	padding:10px;
	background:#dcd6cd;
	height:16px;
	display:inline-block;
	font-size:15px;
}

footer ul li a:hover{
	background:#ff9c00;
	color:white;
}

#responsiveMenu{
	display:none;
}

.navicon{
	width: 18px;
	height: 14px;
	position: relative;
	margin: 0 7px 0 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
	
.navicon span{
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: black;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out, background-color 0s;
}
	
.navicon span:nth-child(1) {
	top: 0px;
}

.navicon span:nth-child(2),
.navicon span:nth-child(3) {
	top: 6px;
}

.navicon span:nth-child(4) {
	top: 12px;
}
		
.aktiv .navicon span:nth-child(1) {
	top: 7px;
	width: 0%;
	left: 50%;
}

.aktiv .navicon span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.aktiv .navicon span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.aktiv .navicon span:nth-child(4) {
	top: 7px;
	width: 0%;
	left: 50%;
}

.navicon:hover span{
	background:#ff9c00;
}

#menuFooterResponsive{
	display:none;
}

.trenner{
	visibility:none;
	background-color:white;
	height:10px;
	clear:both;
	width:100%;
}

.editmode .trenner{
	visibility:visible;
	background-color:#ddd;
}


@media screen and (max-width:1230px){
	
	#page{
		min-width:unset;
		width:100%;
		padding:0;
		height:auto;
		overflow: initial;
		min-height:unset;
	}
	
	nav ul {
		padding: 0px 12px;
	}
	
	nav ul li{
		margin-right:10px;
	}
	
	nav ul li a{
		font-size:15px;
	}
	
	#menuTop ul{
		padding-right:8px;
	}
	
	section{
		padding-right: 50px;
	}
	
	footer ul li{
		margin-left:0px;
	}
	
}

@media screen and (max-width:960px){
	
	#header{
		height: 135px;
	}
	
	#logo{
		left:20px;
		top: 23px;
	}
	
	#responsiveMenu{
		display:flex;
		width:100%;
		background: #dcd6cd;
		color:black;
		align-items:center;
		justify-content:center;
		padding-top:10px;
		padding-bottom:10px;
		font-weight:300;
		font-size:20px;
		cursor:pointer;
	}
	
	#responsiveMenu:hover{
		background-color:#ff9c00;
		color:white;
	}
	
	#responsiveMenu.aktiv{
		background-color:#bfbab1;
		color:white;
	}
	
	#responsiveMenu.aktiv .navicon span,
	#responsiveMenu:hover .navicon span{
		background-color:white;
	}
	
	nav,
	#menuTop,
	#menuFooterResponsive{
		height:auto;
		display:none;
	}
	
	nav.aufgeklappt,
	#menuTop.aufgeklappt,
	#menuFooterResponsive.aufgeklappt{
		display:flex;
	}
	
	#menuTop ul,
	#menuMain ul,
	#menuFooterResponsive ul{
		display:flex;
		flex-direction:column;
		width:100%;
		padding:0;
		align-items:center;
		height:auto;
	}
	
	#menuTop ul li a,
	#menuMain ul li a,
	#menuFooterResponsive ul li a{
		font-size:18px;
		height:auto;
		width:100%;
		box-sizing:border-box;
		text-align:center;
		border-top:1px solid #bfbab1;
		font-weight: 400;
	}
	
	#menuTop ul li a,
	#menuFooterResponsive ul li a{
		font-weight:300;
	}
	
	#menuFooterResponsive ul li:last-of-type{
		display:none;
	}
	
	#menuMain ul ul a{
		font-size:16px;
		padding: 7px 20px;
		font-weight: 300;
		border-top:1px dotted #bfbab1;
	}
	
	#menuTop li,
	#menuMain li,
	#menuFooterResponsive li{
		display:flex;
		flex-direction:column;
		width:100%;
		padding:0;
		align-items:center;
		height:auto;
		margin:0;
	}
	
	#menuMain ul ul{
		position:static;
		display:flex;
		flex-direction:column;
	}
	
	#menuTop{
		position:static;
	}
	
	section{
		padding:0;
		width:100%;
	}
	
	aside{
		width:100%;
		max-width:600px;
	}
	
	#content {
		padding: 30px 20px 10px;
	}
	
	footer{
		margin-top:10px;
	}
	
	footer ul{
		display:none;
	}
	
	.mitgliedschaft, .zertifikat{
		width:100%;
		margin-bottom:15px;
	}
	
	#wrapper::after {
		border-bottom: 60px solid white;
	}
}

@media screen and (max-width:680px){
	
	#kacheln .contentelement:nth-of-type(2n),
	#kacheln .contentelement{
		width:100%;
		margin:0 0 10px;
		padding:0;
	}
	
	#logo{
		-webkit-transform:scale(90%);
		-ms-transform:scale(90%);
		transform:scale(90%);
	}
	
	#page footer p{
		margin: 0;
		padding: 10px 50px 10px 20px;
		height: auto;
		line-height: 130%;
	}
	
	#page aside .zitat p{
		padding: 0 25px;
	}
	
	#page aside .zitat p::after{
		right: -10px;
	}
	
	#page aside .zitat p::before{
		left:-10px;
	}
	
	aside .zitat h4{
		text-align:left;
	}
	

	
	#wrapper::after {
		display:none;
	}
}