/* Filter
---------------------------------------------------------------------- 

Filter 1: 	Förderperiode
			Value:	"fs-2007"	(Förderperiode 2007-2013)
					"fs-2014"  	(Förderperiode 2014-2020)
					"fs-2021"  	(Förderperiode 2021-2027)
					"fs-2028"  	(Flrderperiode ab 2028)
					
Filter 3:	Thematische Zuordnung
			Value:	"bbk"					-	Bioökonomie, Biotechnologie, Kreislaufwirtschaft
					"cluster"				-	Cluster, Unternehmensnetze, Wissenstransfer
					"cluster-netze"			-	Cluster und Unternehmensnetze
					"mobil"		 			-	Nachhaltige Mobilität
					"digi-tech"				-	Digitale Technologien
					"ki"					-	Künstliche Intelligenz
					"infrastruktur-kmu"		-	Innovationsinfrastruktur für KMU
					"infrastruktur-stadt"	-	Städtische Infrastruktur
					"e-effizienz"			-	Energieeffizienz
					"wasserstoff"			-	Wasserstoff
					"wasser"				-	Wasserwirtschaft, Abwasser
					"bauen"					-	Nachhaltiges Bauen



Labels
			class	=	strategisch
						regiowin
						step
						nachhaltiges-bauen			
						
---------------------------------------------------------------------- */






/* Controls
---------------------------------------------------------------------- */

form .filter-controls {
    padding: 1rem;
    font-size: 0.1px;
}

form .filter-control-group {
    display: inline-block;
    margin-left: .75rem;
    vertical-align: top;
}

form .filter-control {
    position: relative;
    display: inline-block;
    width: 2.7rem;
    height: 2.7rem;
    cursor: pointer;
    font-size: 0.1px;
    color: white;
    transition: background 150ms;
}


form .filter-control-text {
    width: auto;
    padding: 0.3rem 2rem;
	font-size:100%;
    background: var(--bw-grau-5);
	color:var(--bw-black);
	height:48px;
	border:1px solid var(--efre-form-border);
}

form .filter-control:not(.mixitup-control-active):hover {
    background: var(--bw-grau-3);
	color:#ffffff;
}
form .filter-control-sort {
	background: var(--bw-grau-5);
	color:var(--bw-black);
	height:48px;
	width:48px;
	border:1px solid var(--efre-form-border);
}
form .filter-control-sort:hover {
    background: var(--bw-grau-3);
	color:#ffffff;
}

form .filter-control-sort:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-left: 2px solid;
    top: calc(50% - 6px);
    left: calc(50% - 6px);
    transform:  translateY(2px) rotate(45deg);
}

form .filter-control-sort[data-sort*=":desc"]:after {
    transform:  translateY(-3px) rotate(-135deg);
}

.mixitup-control-active {
    background: var(--bw-black);
	color:#ffffff;
}



form .filter-select-wrapper {
    display: inline-block;
    padding: .5rem;
    margin-left: .75rem;
    vertical-align: top;
}
select {
	background-color: var(--efre-form-bg);
    box-shadow: inset 0 0 0 2px var(--efre);
	display:inline-block !important;
}
fieldset {
	border:none;
	display:inline-block !important;
	padding-top:0 !important;
	width:100%;
	padding:0 !important;
}

.filter-spalten {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

@media (max-width: 579px) {
    .filter-spalte-1 {
		width:100%;
		margin-bottom:2rem;
	}
	.filter-spalte-2 {
		width:calc(100% - 6px);
		margin-bottom:2rem;
		margin-left:-8px;
	}
	.filter-spalte-3 {
		width:calc(100% - 6px);
		margin-left:-8px;
	}
	.filter-spalte-4 {
		width:calc(100% - 6px);
		margin-left:-8px;
	}
}

@media (min-width: 580px) and (max-width:1091px) {
    .filter-spalte-1 {
		width:100%;
		margin-bottom:2rem;
	}
	.filter-spalte-2 {
		width:calc(50% - 10px);
		margin-bottom:2rem;
		margin-right:8px;
		
	}
	.filter-spalte-3 {
		width:calc(50% - 10px);
		margin-left:-8px;
	}
	.filter-spalte-4 {
		width:100%;
		margin-left:-8px;
	}
	
}


@media (min-width: 1090px) {
    .filter-spalte-1 {
		width:calc(14% - 0rem);
	}
	.filter-spalte-2 {
		width:calc(30% - 1rem);
	}
	.filter-spalte-3 {
		width:calc(16% - 1rem);
	}
	.filter-spalte-4 {
		width:calc(40% - 1rem);
	}
	.select {
		font-size: var(--bw-font-size-250) !important;
	}
}


/* Container
---------------------------------------------------------------------- */

.filter-container {
    padding:2rem 0 0 0;
    text-align: justify;
    font-size: 0.1px;
}

.filter-container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

/* Target Elements
---------------------------------------------------------------------- */

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    background: #fff;
    margin-bottom: 1rem;
    position: relative;
}


.mix.fs-2007 {
    color:transparent;
}
.mix.fs-2014 {
    color:transparent;
}

.mix.fs-2028 {
    color:transparent;
}

.mix.fs-2021 {
    color:transparent;
}


.mix.bbk {
	color:transparent;
}
.mix.cluster {
	color:transparent;
}
.mix.cluster-netze {
	color:transparent;
}
.mix.mobil {
	color:transparent;
}
.mix.digi-tech {
	color:transparent;
}
.mix.ki {
	color:transparent;
}
.mix.infrastruktur-kmu {
	color:transparent;
}
.mix.infrastruktur-stadt {
	color:transparent;
}
.mix.e-effizienz {
	color:transparent;
}
.mix.wasserstoff {
	color:transparent;
}
.mix.wasser {
	color:transparent;
}
.mix.bauen {
	color:transparent;
}


/* Grid Breakpoints
---------------------------------------------------------------------- */


/* 1 Column */

@media screen and (min-width: 1px) {
    .mix,
    .gap {
        width: 100%;
    }

    .mix.triangle:after {
        font-size: 2vw;
    }
}

/* 2 Columns */

@media screen and (min-width: 961px) {
    .mix,
    .gap {
        width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
    }

    .mix.triangle:after {
        font-size: 1.5vw;
    }
}

/* 3 Columns */

@media screen and (min-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }

    .mix.triangle:after {
        font-size: 1.25vw;
    }
}