/* Texte */
.text-weiss,
.text-weiss *{
	color:var(--weiss);
}
.text-schwarz,
.text-schwarz *{
	color:var(--schwarz);
}

.text-gruen,
.text-gruen *{
	color:var(--gruen);
}
.text-grau,
.text-grau *{
	color:var(--grau);
}
.text-dunkelgruen,
.text-dunkelgruen *{
	color:var(--dunkelgruen);
}
.text-gelb,
.text-gelb *{
	color:var(--gelb);
}
.text-orange,
.text-orange *{
	color:var(--orange);
}
.text-rot,
.text-rot *{
	color:var(--rot);
}
.text-dunkelrot,
.text-dunkelrot *{
	color:var(--dunkelrot);
}
.text-hellblau,
.text-hellblau *{
	color:var(--hellblau);
}
.text-dunkelblau,
.text-dunkelblau *{
	color:var(--dunkelblau);
}
.text-dunkelgrau,
.text-dunkelgrau *{
	color:var(--dunkelgrau);
}

/* Backgrounds */
.bg-rot{
	background-color:var(--rot);
}
.bg-dunkelrot{
	background-color:var(--dunkelrot);
}
.bg-orange{
	background-color:var(--orange);
}
.bg-hellgrau{
	background-color:var(--hellgrau);
}
.bg-hellblau{
	background-color:var(--hellblau);
}
.bg-dunkelblau{
	background-color:var(--dunkelblau);
}
.bg-gruen{
	background-color:var(--gruen);
}

/* Buttons */
.link-btn a,
a.link-btn{
	display:inline-block;
	font-size:1.25rem;
	line-height:1.2empx;
	background: var(--orange);
	color:#fff;
	font-weight: 300;
	padding: .4em 50px .4em 30px;
	text-decoration:none;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 35px) 100%, 0 100%);
	transition: all .4s
}
.link-btn a:hover,
a.link-btn:hover{
	background: var(--rot);
	color:#fff;
}
.bg-rot .link-btn a:hover,
.bg-rot a.link-btn:hover,
#footer .link-btn a:hover,
#footer .link-btn:hover{
	background: var(--hellblau);
	color:#fff;
}
.link-btn.btn-rot a,
a.link-btn.btn-rot{
	background: var(--rot);
}
.link-btn.btn-rot a:hover,
a.link-btn.btn-rot:hover{
	background: var(--orange);
	color:#fff;
}
.link-btn.btn-blau a,
a.link-btn.btn-blau{
	background: var(--hellblau);
}
.link-btn.btn-blau a:hover,
a.link-btn.btn-blau:hover{
	background: var(--orange);
	color:#fff;
}
@media (max-width: 992px) {

}
@media (max-width: 768px) {

}
@media (max-width: 576px) {

}

/* Carousel Partner Logos */


/* Events */
.em.em-list .em-item{
	background-color: #fff;
}

/* Hintergründe */
section.bg-hebbel-punkte-1{
	background-image: url(../images/hebbel-silhouette-blaugrau.svg);
	background-repeat: no-repeat;
	background-position: right -60px bottom;
	background-color: transparent;
	background-size: auto 80%;
}
section.bg-hebbel-punkte-2{
	background-image: url(../images/hebbel-silhouette-blaugrau.svg);
	background-repeat: no-repeat;
	background-position: right -60px bottom;
	background-color: transparent;
	background-size: auto 80%;
}


/* Section Partner */
section.partner .vc_row.logos .wpb_single_image {
	margin: 0 20px 0 20px;
}

/* Bunte Silhouetten / Sections müssen fluid sein */
section.weiss-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-weiss.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.hellgrau-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-hellgrau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.dunkelblau-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-dunkelblau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.hellblau-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-hellblau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.orange-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-orange.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.rot-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-rot.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.weiss-oben:before{
	content:"";
	position:absolute;
	top:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-weiss-reverse.png) no-repeat center top transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.hellgrau-oben:before{
	content:"";
	position:absolute;
	top:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-hellgrau-reverse.png) no-repeat center top transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.dunkelblau-oben:before{
	content:"";
	position:absolute;
	top:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-dunkelblau-reverse.png) no-repeat center top transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.hellblau-oben:before{
	content:"";
	position:absolute;
	top:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-hellblau-reverse.png) no-repeat center top transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.orange-oben:before{
	content:"";
	position:absolute;
	top:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-orange-reverse.png) no-repeat center top transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.rot-oben:before{
	content:"";
	position:absolute;
	top:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/schule-silhouette-rot-reverse.png) no-repeat center top transparent;
	background-size: 100% auto;
	pointer-events: none;
}
*[class*="oben"] .vc_row,
*[class*="unten"] .vc_row{
	position: relative;
	z-index:10;
	/* min-height:300px; */
}
/* Schräge bunte Kanten / Sections müssen fluid sein */
section.kante-dunkelblau-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-unten-dunkelblau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-dunkelgruen-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-unten-dunkelgruen.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-hellblau-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-unten-hellblau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-orange-unten:after{
	content:"";
	position:absolute;
	z-index:10;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-unten-orange.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-rot-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-unten-rot.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-weiss-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-unten-weiss.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-hellgrau-unten:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-unten-hellgrau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-dunkelblau-oben:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-oben-dunkelblau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-dunkelgruen-oben:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-oben-dunkelgruen.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-hellblau-oben:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-oben-hellblau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-orange-oben:after{
	content:"";
	position:absolute;
	z-index:10;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-oben-orange.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-rot-oben:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-oben-rot.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-weiss-oben:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-oben-weiss.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
section.kante-hellgrau-oben:after{
	content:"";
	position:absolute;
	bottom:-2px;
	left:0px;
	width:100%;
	height:300px;
	background:url(../images/hebbel-kante-oben-hellgrau.png) no-repeat center bottom transparent;
	background-size: 100% auto;
	pointer-events: none;
}
*[class*="kante"] .vc_row{
	position: relative;
	z-index:10;
}


/* Background Bilder */
.silhouette-blaugrau{
	background-image: url(../images/hebbel-silhouette-blaugrau.svg);
	background-repeat: no-repeat;
	background-position: left -10px center;
	background-size: auto 80%;
}
.bg-pos-left-top{
	background-position: left -10px top;
}
.bg-pos-left-bottom{
	background-position: left -10px bottom;
}
.bg-pos-right-top{
	background-position: right -10px top;
}
.bg-pos-right-bottom{
	background-position: right -10px bottom;
}

/* Background Verlauf */
.bg-verlauf-1{
	background: var(--hebbel-verlauf-1);
}

/* Bilder beschneiden mit clip-path */
.clipP-oben-1{
	clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
}

.clipP-unten-1{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 61%);
}
.clipP-unten-2{
	clip-path: polygon(0 0, 100% 0, 100% 79%, 0 100%);
}
.clipP-unten-3{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%);
}
/* Reverse Grid. Reihenfolge der Spalten ändert sich */


@media (max-width: 992px) {
	.vc_row.reverse-grid-992 .wpb_column.first{
		order: 2;
	}
	.vc_row.reverse-grid-992 .wpb_column.second{
		order: 1;
	}
}

/* Accordion */
.wpb_accordion{
	
}
.wpb_content_element .wpb_accordion_header{
	
}
.content .wpb_content_element.dt-style:not(.dt-accordion-bg-on) .wpb_accordion_header > a span{
	color: var(--rot);

}
.content .wpb_content_element.dt-style:not(.dt-accordion-bg-on) .wpb_accordion_header > a:hover span{
	color: var(--hellblau) !important;
}
.content .bg-orange .wpb_content_element.dt-style:not(.dt-accordion-bg-on) .wpb_accordion_header > a span{
	color: var(--weiss);
}
.content .bg-orange .wpb_content_element.dt-style:not(.dt-accordion-bg-on) .wpb_accordion_header > a:hover span{
	color: var(--rot) !important;
}
.content .wpb_content_element.dt-style:not(.dt-accordion-bg-on) .wpb_accordion_header > a:before{
	background-color:transparent;
}
.wpb_content_element.dt-accordion-line-on .wpb_accordion_wrapper .wpb_accordion_header{
	margin:0;
	padding:0;
	padding: 20px 0 20px 0 !important;
}
.wpb_content_element .wpb_accordion_header>a:after{
	position:absolute;
	top:10px;
	right:0px;
	content:"";
	width:31px;
	height:31px;
	color: var(--rot);
	background: url(../images/arrow-right-rot.svg) no-repeat center transparent;
	background-size: 100% auto;
	transform: rotate(0);
	transition:all .4s;
}
.bg-orange .wpb_content_element .wpb_accordion_header>a:after{
	color: var(--weiss);
	background: url(../images/arrow-right-weiss.svg) no-repeat center transparent;
	background-size: 100% auto;
}
.wpb_content_element .wpb_accordion_header.ui-state-active>a:after{
	content:"";
	transform: rotate(-90deg);
}
.wpb_content_element .wpb_accordion_header > a span{
	color: var(--weiss);
}
.wpb_content_element.dt-accordion-line-on .wpb_accordion_wrapper .wpb_accordion_header{
	border-color: var(--weiss);
}
.dt-style.wpb_content_element .wpb_accordion_wrapper .wpb_accordion_content{
	padding: 40px 40px 40px 0px;
}