:root{
	--umwelt-light: ##009fe30d;
}
/**************************************
**  Page
***************************************/
body{
	font-family:Arial,Helvetica,sans-serif;
}
.container, article.container, .pagecontent{
	max-width:1140px !important;
}
@media only screen and (max-width: 480px) {
  .container, article.container, .pagecontent{
    max-width:100vw !important;
  }
}
div.tx_mikroschadstoffe header#kopf{
	padding:1.5rem 0 !important;
}

div.tx_mikroschadstoffe nav#main-nav.navbar{
	padding:0.5rem 0 !important;
}

/**************************************
**  page content
***************************************/

div.tx_mikroschadstoffe{
	color:var(--klima);
}
@counter-style mikro {
	system:cyclic;
	symbols:'>';
}
div.tx_mikroschadstoffe h1{
	font-size:2rem;
}
div.tx_mikroschadstoffe h2{
	font-size:1.75rem;
}
div.tx_mikroschadstoffe h3{
	font-size:1.5rem;
}
div.tx_mikroschadstoffe h4{
	font-size:1.2rem;
}
div.tx_mikroschadstoffe h5,
div.tx_mikroschadstoffe h6{
	font-size:1rem;
}
div.tx_mikroschadstoffe h1,
div.tx_mikroschadstoffe h2,
div.tx_mikroschadstoffe h3,
div.tx_mikroschadstoffe h4,
div.tx_mikroschadstoffe h5{
	font-weight:600;
}
div.tx_mikroschadstoffe img{
	background-color:unset !important;
	border:none !important;
}
/**************************************
**  Links
***************************************/
div.tx_mikroschadstoffe a{ 
	color:var(--klima);
	font-weight:400;
	text-decoration:underline;
	padding:2px;
}
div.tx_mikroschadstoffe a:hover, 
div.tx_mikroschadstoffe a:active, 
div.tx_mikroschadstoffe a:focus{
	background-color:#02306421;
	color:var(--klima);
}

/**************************************
**  Karte Klaeranlagen
***************************************/

/**************************************
**  Karte Klaeranlagen Legende
***************************************/
@media only screen and (max-width: 480px) {
	div.tx_mikroschadstoffe .legende ul{
		display:block !important;	
	}
}

div.tx_mikroschadstoffe .karten-footer{
	padding:.5rem;
	background-color:#efefef;
	border:1px solid #333333;
	margin-top:0;
}

div.tx_mikroschadstoffe .legende{
	margin-top:.5rem;
}
div.tx_mikroschadstoffe .filter ul,
div.tx_mikroschadstoffe .legende ul{
	display:inline-flex;
}
div.tx_mikroschadstoffe .filter li,
div.tx_mikroschadstoffe .legende li{
	padding:1px 1.2rem;
	background-position:left; 
	background-repeat:no-repeat; 
	background-size:1rem; 
	list-style-type:none;
}
div.tx_mikroschadstoffe .filter li img,
div.tx_mikroschadstoffe .legende li img{
	height: 30px;
    vertical-align: bottom;
}
div.tx_mikroschadstoffe .filter h3,
div.tx_mikroschadstoffe .legende h3{
	display:inline;
	font-size:1rem;
}
/*******************************
**  Seite "Foerderung"
*******************************/
@media only screen and (max-width: 480px) {
	div.tx_mikroschadstoffe div#c1221,
	div.tx_mikroschadstoffe div#c1223{ 
		display:none !important;
	}	
}
/*******************************
**  Seite "Publikationen"
*******************************/
div.tx_mikroschadstoffe ul.ce-uploads img{
	border:1px solid var(--klima) !important;
	max-width:20vw;
}
@media only screen and (max-width: 480px) {
	div.tx_mikroschadstoffe ul.ce-uploads li div{
		margin-top: -3rem;
		margin-bottom: 2rem;
	}
}
/*******************************
**  Info-Karten Startseite
*******************************/
.flex-card-container{
	/*margin-top:3rem;*/
	display:flex; 
	flex-wrap:wrap;
	/*flex-direction:row;*/
	gap:3rem;
	justify-content:space-between;
	position: relative;
	left: -45px;
	width: 100%;
	width: 1200px !important;
}
@media only screen and (max-width: 480px) {
	.flex-card-container{
		background-image:none !important;
	}
}
	div#keyVisual {
		height: 5px;
	}
	.flex-card-container{
		left:unset;
		width:100% !important;
	}
	.flex-card{
		max-width:unset !important;
	}
	.flex-card .flex-card-content, 
	.flex-card .flex-card-button{
			height:unset;
			padding:.5rem 1rem;
	}
}
.fcc-mit-header{
	padding:.5rem 45px;
}
.fcc-ohne-header{
	padding:3rem 45px;
}
@media only screen and (max-width: 480px) {
	.fcc-mit-header {
	  padding: .5rem 0px;
	}
	.fcc-ohne-header{
		padding:3rem 0px;
	}
}
.flex-card{
	display:flex;
	flex-flow:column;
	flex:1 1 25%;
	justify-content:space-between;
	min-width:15em;
	max-width:40%;
	border:1px solid var(--umwelt);
	border-bottom-width:8px;
	border-radius:0 1rem 0 0;
	background-color:#ffffff;
	overflow:hidden;
}
.flex-card .flex-card-header{
	color:#ffffff;
	height: auto;
	/*margin: -.1em;*/
	overflow:hidden;
}
.flex-card .flex-card-header img{
	border:none;
	background-color:none;
	padding:0;
}
.flex-card .flex-card-content,
.flex-card .flex-card-button{
	padding:1rem;
}
.flex-card .flex-card-content{
	height:10rem;
}
.flex-card .flex-card-content h3{
	font-size: 1.4rem;
	font-weight: bolder;
}
.flex-card .flex-card-button{
	
}
/******************************
** button, blue-button
******************************/
div.tx_mikroschadstoffe .button,
div.tx_mikroschadstoffe .blue-button {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0.4em 0.5em;
    margin-right: 0.5em;
    margin-top: 0.5em;
    border-radius: 1em;
	text-decoration:none;
}
div.tx_mikroschadstoffe a.button{ 
	color: var(--klima, #023064);
	background-color:white;	
	border:2px solid var(--klima, #023064);
}
div.tx_mikroschadstoffe a.button:active, 
div.tx_mikroschadstoffe a.button:hover, 
div.tx_mikroschadstoffe a.button:focus{
	color: white;
	background-color:var(--klima) ;
	border:2px solid white;
}
div.tx_mikroschadstoffe a.blue-button {
	color:white;
	/*background-color: var(--klima, #023064);
	border:2px solid var(--klima, #023064);*/
	background-color: var(--umwelt);
	border:2px solid var(--umwelt);
} 

div.tx_mikroschadstoffe a.blue-button:active, 
div.tx_mikroschadstoffe a.blue-button:hover,
div.tx_mikroschadstoffe a.blue-button:focus {
	/*color: var(--klima, #023064);
	border:2px solid var(--klima);*/
	color: var(--umwelt);
	border:2px solid var(--umwelt);
	background-color: white;
}
  
/******************************
** frame-layouts
******************************/
.frame-layout-221 img,
.frame-layout-222 img,
.frame-layout-223 img, 
.frame-layout-224 img,
.frame-layout-226 img,
.frame-layout-227 img,
.frame-layout-228 img,
.frame-layout-229 img,
.frame-layout-230 img,
.frame-layout-240 img{
	background-color:unset;
	border:none !important;
}    
.frame-layout-226,
.frame-layout-227,
.frame-layout-228,
.frame-layout-229,
.frame-layout-230{
	background-color:var(--umwelt-light) !important;
}
@media only screen and (max-width: 480px) {
	.frame-layout-221,
	.frame-layout-222, 
	.frame-layout-223,
	.frame-layout-224,
	.frame-layout-226,
	.frame-layout-227,
	.frame-layout-228,
	.frame-layout-229,
	.frame-layout-231,
	.frame-layout-232,
	.frame-layout-233{
		width:100% !important;
		display:block !important;
	}
}
/** 221 = zweiColsLinks **/
/** 226 = zweiColLinksMitBgColor **/
.frame-layout-221,
.frame-layout-226{
	width:66%;
	display:inline-block;
	vertical-align:top;
	padding: 1rem 1rem 1rem 0;
}
/** 222 = eineColRechts **/
/** 227 = eineColRechtsMitBgColor **/
.frame-layout-222, 
.frame-layout-227{
	width:33%;
	display:inline-block;
	vertical-align:top;
	padding: 1rem 0 1rem 1rem;
}
.frame-layout-222 img{
	max-width:10vw;
}
@media only screen and (max-width: 480px) {
	.frame-layout-222{
		border: 1px solid var(--umwelt) !important;
		margin-bottom: 2rem;
		border-top-right-radius: 1rem;
		border-bottom-width: 8px !important;	
	}
	.frame-layout-222 img{
		max-width:unset !important;
	}
}
/** 223 = eineColLinks **/
/** 228 = eineColLinksMitBgColor **/
.frame-layout-223,
.frame-layout-228{
	width:33%;
	display:inline-block;
	vertical-align:top;
	padding:1rem;
}
/** 224 = zweiColsRechts **/
/** 229 = zweiColsRechtsMitBgColor **/
.frame-layout-224,
.frame-layout-229{
	width:66%;
	display:inline-block;
	vertical-align:top;
	padding:1rem;
}
@media only screen and (max-width: 480px) {
	.frame-layout-224,
	.frame-layout-229{
		padding:0;
	}
}
/** 225 = ganzeBreiteMitBgImg **/
.frame-layout-225{
	width:auto;
	height:20rem;
	margin:2rem -2.75rem;
	background-image:url('/typo3conf/ext/mikroschadstoffe/Resources/Public/Images/bg/bg1_mit_icon_klaeranlagen.png');
	border-bottom:8px solid var(--umwelt);
}
.frame-layout-225 .ce-textpic{
	width: 50% !important;
	padding: 2rem;
	margin: 0 0 auto auto;
}
@media only screen and (max-width: 480px) {
	.frame-layout-225 .ce-textpic{
		width:100% !important;
		display:block !important;
		margin:0;
		padding:1rem;
	}
	.frame-layout-225{
		margin:0 !important;
	}
}
/*** 230 = Text links Bild rechts ***/
.frame-layout-230{
	display:flex;
	flex-direction:row;
	gap:2rem;
}
.frame-layout-230 .ce-bodytext{
	flex:2;
}
.frame-layout-230 .ce-gallery{
	flex:1;
	margin-top:1rem;
}
/*** 231 = Deko-Bild links ***/
.frame-layout-231{
	width:33%;
	display:inline-block;
	vertical-align:baseline;
	padding: 1.5rem .5rem 0 0;
	/*border-bottom: 8px solid var(--umwelt);*/
}
div.tx_mikroschadstoffe .frame-layout-231 img{
	border:none;
	border-bottom: 8px solid var(--umwelt) !important;
	background-color:unset;
	border-top-left-radius:1rem;
	padding: 0 0 2px 0;
	margin: 0 .5em 0 0;
}
/*** 232 = Deko-Bild rechts ***/
.frame-layout-232{
	width:33%;
	display:inline-block;
	vertical-align:baseline;
	padding: 2rem 0 0 0;
}
@media only screen and (max-width: 480px) {
	.frame-layout-232{
		display:none !important;
	}
}
div.tx_mikroschadstoffe .frame-layout-232 img{
	border:none;
	border-bottom: 8px solid var(--umwelt) !important;
	background-color:unset;
	border-top-right-radius:1rem;
	margin: 0 0 0 .5em;
	padding: 0 0 .2em 0;
 }
/*** 232 = InfoBox ***/
.frame-layout-233{
	width:33%;
	display:inline-block;
	vertical-align:baseline;
	padding: 3rem .5rem 1rem 1rem;
	border:2px solid var(--umwelt);
	border-bottom: 8px solid var(--umwelt);
	background-color:unset;
	border-top-right-radius:1rem;
}
.frame-layout-233 header{
	color:var(--umwelt);
	background-color:var(--umwelt);
	margin:-4rem -.5rem 2rem -1rem;
	border-top-right-radius:1rem;
} 

/********************************
**  frame-classes
********************************/
/*** 220 = border links ***/
.frame-220{
	border-left:2px solid var(--umwelt);
}
/*** 221 = border rechts ***/
.frame-221{
	border-right:2px solid var(--umwelt);
}
@media only screen and (max-width: 480px) {
	.frame-221,
	.frame-220{ 
		border:none;
	} 
	.frame-220.frame-layout-233{
		border:2px solid var(--umwelt) !important;
	}
}
/***********************************
**  Navbar
***********************************/
div.tx_mikroschadstoffe img.navbar-brand-logo-normal{
	width:25px;
	border:none !important;
	background-color:unset !important;
	vertical-align:baseline; 
}
div.tx_mikroschadstoffe .navbar-light .navbar-nav .nav-link {
	color: var(--klima);
	text-decoration:unset;
	font-weight:600;
}
/***********************************
**  Akkordeon
***********************************/
div.tx_mikroschadstoffe ul#tinyaccordion1002.tinyaccordion li h3, 
div.tx_mikroschadstoffe ul#tinyaccordion1002.tinyaccordion li h4{
	color:#FFFFFF !important;
	background-color:var(--umwelt) !important;
	border-top-right-radius:1rem;
}
div.tx_mikroschadstoffe ul#tinyaccordion1002.tinyaccordion h4 {
  background-image: url(/typo3conf/ext/mikroschadstoffe/Resources/Public/Icons/png/plus-font-awesome-121-25340-transparent-auf-weiss.png) !important;
  background-position: 98% center !important;
  background-size: 1.5rem !important;
  padding-right: 25px;
  background-repeat: no-repeat;
}
/***********************************
**  Fuss-Nav Mikro
***********************************/
div.tx_mikroschadstoffe div#mikroFooter{
	max-width: 1140px !important;
	margin:0 auto;
	padding:1rem;
	display:flex;
	flex-direction:row;
	font-size:small;
}
div.tx_mikroschadstoffe div#mikroFooter a,
div.tx_mikroschadstoffe div#footer-bottom a{
	color: var(--klima);
	text-decoration:unset;
}
div.tx_mikroschadstoffe div#mikroFooter ul{
	/*list-style:mikro;*/
	list-style-type:'> ';
	color:var(--klima);
}
div.tx_mikroschadstoffe div#footer-logo{
	flex:1;
}
div.tx_mikroschadstoffe div#footer-logo img{
	max-width:10vw;
	background-color:unset;
	border:unset;	
}
@media only screen and (max-width: 480px) {
	div.tx_mikroschadstoffe div#footer-logo img{
		min-width:25vw !important;
	}
}
div.tx_mikroschadstoffe div#footer-logo img{
	max-width:10vw;
}

div.tx_mikroschadstoffe div#footer-sitemap{
	flex:1;
}
@media only screen and (max-width: 480px) {
	div.tx_mikroschadstoffe div#footer-sitemap{
		display:none;
	}
}
div.tx_mikroschadstoffe div#footer-fussNav{
	flex:1;
}
div.tx_mikroschadstoffe div#footer-dummy{
	flex:1;
	color:#ffffff;
}
div.tx_mikroschadstoffe ul#nav-footer-mikro.nfooter{
	float:unset !important;
}
/***********************************
**  Fuss-Nav Mikro, Copy und toTop
***********************************/
div.tx_mikroschadstoffe div#footer-bottom{
	max-width: 1140px !important;
	margin: -2rem auto 0 auto;
	padding: 0 1rem 1rem 1rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: small;
}
div.tx_mikroschadstoffe div#footer-toTop{
	flex:1;
	align-self: last baseline;
	text-align: right;
	font-size: large;
}	
div.tx_mikroschadstoffe div#footer-toTop svg{
	color:var(--klima);
}
div.tx_mikroschadstoffe div#footer-copyYear{
	font-size:0.75rem;
	align-self:center;
}
@media only screen and (max-width: 480px) {
	div.tx_mikroschadstoffe div#footer-copyYear{
		font-weight:400;
	}
	div.tx_mikroschadstoffe div#footer-logo img{
		max-width:30vw;
	}
	div.tx_mikroschadstoffe div#keyVisual{
		height:5px;
	}
}
/**************************************
**  table Klaeranlagen-Liste
***************************************/
table#anlagenliste tr:nth-child(even) td{ 
  background-color: #e4ebf2; 
}
table#anlagenliste{
	border-collapse:unset;
}
table#anlagenliste th{
	color:#FFFFFF;
	background-color: var(--umwelt);
}

table#anlagenliste th,
table#anlagenliste td {
	text-align: center;
	min-width: 8em;
	padding: 8px 2px;
}

@media only screen and (max-width: 480px) {
	table#anlagenliste th.disp-none,
	table#anlagenliste td.disp-none {
		display:none; 
	}
}
@media only screen and (max-width: 480px) {
	table#anlagenliste th.dt,
	table#anlagenliste td.dt{
		display:none;
	}
	table#anlagenliste th,
	table#anlagenliste td{
		max-width:24vw;
		overflow:hidden;
		min-width:unset;
	}

}
table.tx_mikroschadstoffe.border th, 
table.tx_mikroschadstoffe.border td{
	border:1px solid var(--klima);
}
table.tx_mikroschadstoffe.border{
	border:1px solid var(--klima);
}
/**************************************
**  flex-table Klaeranlage-Details
***************************************/
div.tx_mikroschadstoffe div.flex-container.anlagenDetails{
	margin-top:2rem;
}
div.tx_mikroschadstoffe div.flex-container.anlagenDetails .table{
	display:table;
	color:var(--klima);
}
div.tx_mikroschadstoffe div.flex-container.anlagenDetails .tr{
	display:table-row;
}
div.tx_mikroschadstoffe div.flex-container.anlagenDetails .th{
	display:table-cell;
	font-weight:600;
	color:var(--klima);
	text-align:end;
	padding-right:1rem;
}
div.tx_mikroschadstoffe div.flex-container.anlagenDetails .td{
	display:table-cell;
	color:var(--klima);
	text-align:left;
	min-width:20vw;
}