:root{
  --lanuv: #9d9c9c;
  --natur: #afcb08;
  --umwelt: #009fe3;
  --klima: #023064;
  --verbr: #f39200;
}
@media all {

	body{
		min-width:360px;
	}
	div#keyVisual{
		min-width:360px;
	}
	/****************************
	**  content
	*****************************/
	#lanuv-kopf{
		margin-bottom:2em;
	}
	div.absender{
		max-height:60px;
	}
	div.pagecontent{
		display:flex;
		flex-direction:column;
		background-color:#FFF;
		max-width:60rem;
		margin:0 auto;
	}
	.row{
		margin-left:0;
		margin-right:0;
		gap: 1em 2em;
	}
	h1,h2,h3,h4,h5,h6{
		margin-top:0.5em;
	}
	dl,ol,ul{
		padding-left:2rem;
	}
	
	/******************************************************
	* Bilder im Inhalt: Rahmen, Ausrichtung, Zoom
	******************************************************/
	img{
		border:1px solid #DDDDDD;
		background-color:#EFEFEF;
		padding:0.2em;	
		max-width: 100%;
		height: auto;
	}
	#lanuv-kopf img{
		border:none;
		background-color:#FFFFFF;
		padding:0;
	}

	.bild-links img{
		float:left;
		margin:0.5em 0.75em 0 0;
		font-style:italic;
	}
	.bild-rechts img{
		float:right;
		margin:0.5em 0 0 0.75em;
		font-style:italic;
	}
	.bild-mitte{
		width:auto;
		margin:0 auto;
		font-style:italic;
		text-align:center;
	}
	.bild-mitte img{
		text-align:center;
		margin:0 auto;
	}
	.bild-mitte > figure {
		display: inline-block;
	}
	.infobox{
		margin-top:0.5em;
		border:1px solid #999999;
		background-color:#EFEFEF;
		padding:1em;
		width:30%;
	}
	.floatlinks{
		margin-right:1em;
		float:left;
	}
	.floatrechts{
		margin-left:1em;
		float:right;
	}
	.mitte{
		margin:0em auto 0.75em auto;
	}
	.w-60{
		width:60%;
	}
	.w-90{
		width:90%;
	}
	.zoom {
		transition: transform .2s; /* Animation */
		/*background-color: green;
		padding: 50px;
		width: 200px;
		height: 200px;
		margin: 0 auto;*/
	}
	.zoom:hover {
		transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
	/****************************
	Farbräume
	****************************/

	#farbraum.lanuv #keyVisual{
		background-color:var(--lanuv);
	}
	#farbraum.natur #keyVisual{
		background-color:var(--natur);
	}
	#farbraum.umwelt #keyVisual{
		background-color:var(--umwelt);
	}
	#farbraum.klima #keyVisual{
		background-color:var(--klima);
	}
	#farbraum.verbr #keyVisual{
		background-color:var(--verbr);
	}

	/****************************
	Standard-Styles
	****************************/
	[type="submit"]{
		color:#007bff;
		text-decoration:none;
		background-color:transparent;
	}

	[type="submit"]:hover{
		color:#0056b3;
		text-decoration:underline;
	}
	a{ 
		color:var(--umwelt, #009fe3);		
	}
	a:hover{
		color:var(--umwelt, #009fe3);
		background-color:#009fe321;
	}
	div.footer-content > div{
		align-self:center;
	}
	/****************************
	**  kopf-nav
	*****************************/
	nav#navbarTop .navbar-brand{
		font-size:1rem;
	}
	nav#navbarTop .nav-item-button {
		border:1px solid var(--natur);
		background-color:transparent;
		margin:0 0.5rem;
	}
	li.dropdown-hover:hover ul.dropdown-menu{
		visibility:visible;
		display:inline-block;
	}
	#farbraum.natur nav#navbarTop{
		background-color:var(--natur);
	}
	#farbraum.natur nav#navbarTop{
		padding:.25rem 1rem;
		margin-bottom:3px;
	}
	#farbraum.natur nav#navbarTop a.nav-link-top{
		color:var(--white);
		border:1px var(--natur);
	}
	#farbraum.natur nav#navbarTop a.nav-link-top:hover{
		/*border-color:var(--white);*/
		color:rgba(0,0,0,.9);
	}
	
	/****************************
	**  lanuv-kopf
	*****************************/
	header#kopf{
		padding:1.5rem;
		display:flex;
		flex-wrap:wrap;
		justify-content: space-between;
		background-color:#FFFFFF;
	} 
	header#kopf img{
		border:2px solid transparent !important;
		background:transparent;
		padding:0; 
	}
	header#kopf svg,
	header#kopf img{
		height:60px;
	}
	header#kopf .absender svg tspan{
		font-size:100px;
		font-weight:bold;
	}
	header#kopf a:active, 
	header#kopf a:focus, 
	header#kopf a:hover{
		background-color:transparent;
	}
	header#kopf a:active img, 
	header#kopf a:focus img, 
	header#kopf a:hover img {
		background-color:transparent;
		border:2px solid #666 !important;
	}
	.navbar2{
		position: relative;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: justify;
		justify-content: flex-start;
		padding: .5rem 1rem;
		margin-top:-1.2rem;
		margin-bottom:0.2rem;
	}
	.navbar-button{
		display:none;
	}
	#banner{
		width:100%;
		height:auto;
		margin-bottom:3px;
	}
	#banner img{
		width:100%;
		height:auto;
		max-height:360px;
		border:none;
		padding:0;
	}
	/*****************************
	**  keyVisual
	*****************************/
	div#keyVisual{
		background-color:#9d9c9c;
		width:100%; 
		height:9px;
		z-index:1;
		margin-bottom:1em;
	}
	div#keyVisual.lanuv{
		background-color:#9d9c9c;
	}
	div#keyVisual.umwelt{
		background-color:#009fe3;
	}
	div#keyVisual.natur{
		background-color:#afcb08;
	}
	div#keyVisual.klima{
		background-color:#023064;
	}
	div#keyVisual.verbr{
		background-color:#f39200;
	}	
	div#keyVisual div{
		/*float: right;*/
		margin-top: -60px;
		height: 69px;
		width: auto;
		position:absolute;
		right:0;
		z-index:2;
	}
	div#keyVisual img{
		height:100%;
		border:none;
		padding:0;
		background-color:transparent;
	}
	/****************************
	**  header
	*****************************/
	/*header{
		margin-bottom:2em;
	}
	*/
	/****************************
	**  font-groessen
	*****************************/
	.fs-xxs{font-size:xx-small;}
	.fs-xs{font-size:x-small;}
	.fs-sm{font-size:smaller;}
	.fs-md{font-size:medium;}
	.fs-lg{font-size:larger;}
	.fs-xl{font-size:x-large;}
	.fs-xxl{font-size:xx-large;}
	/****************************
	** Navigation / Breadcrumb
	****************************/
	nav#navi{
		margin-bottom: 1.5em;
	}
	.dropdown-menu h3{
		font-size:large;
	}
	nav.breadcrumb {
		margin-top:-2.5rem;
		margin-bottom: 2.5em;
		font-size:smaller;
		padding: 0.8em 1em;
		border: 1px solid hsl(0, 0%, 90%);
		border-radius: 4px;
		background: hsl(300, 14%, 97%);
	}

	nav.breadcrumb ol {
		margin: 0;
		padding-left: 0.5rem;
		list-style: none;
	}

	nav.breadcrumb li {
		display: inline;
	}

	nav.breadcrumb li + li::before {
	  display: inline-block;
	  margin: 0 0.25em;
	  transform: rotate(15deg);
	  border-right: 0.1em solid currentColor;
	  height: 0.8em;
	  content: '';
	}

	nav.breadcrumb [aria-current="page"] {
	  color: #000;
	  font-weight: 700;
	  text-decoration: none;
	}

	nav .nav-item-button{
	border: 1px solid #a9a9a9;
	background-color: #dfdfdfb4;
	/*border-radius: 0.5rem;*/
	margin:0 0.125rem;
	}
	
	/****************************
	**  article
	*****************************/
	article.container{
		max-width:60em;
	}
	article > div > div {
		width:100% !important;
	}
		
	/****************************
	**  col
	*****************************/
	.col h1, .col h2, .col h3{
		font-size:1.5rem;
	}
	.col{
		min-width:18rem;
	}
	/****************************
	**  figure
	*****************************/
	figure.img{
		
	}
	figcaption.image-caption{
		font-style:italic;
	}

	/****************************
	**  fussNav
	*****************************/
	footer{
		width:100%;
		border-top:0px solid #DDDDDD;
		margin:3rem 0 1rem 0;
		padding:0.5rem;
	}
	.footer-content{
		display:flex;
		flex-wrap:wrap;
		justify-content: space-between;
		background-color:#EEEEEE;
		font-size:75%;
	}
	.footer-wortbild img{
		width: 15%;
		min-width: 8rem;
		max-width: 11rem;
		height:auto;
		border:none;
		background-color:transparent;
		margin:1em;
	}
	#fussNav{
		width:100%;
		/*margin:0rem auto 0.5rem auto;
		padding:0.5rem 0;*/
	}
	ul#nav-footer {
		width:100%;
		list-style-type: none;
		border: 0px solid cyan;
		font-size:0.8rem;
		margin:0 0 0 -2rem;
	}
	.nfooter {
		float: left;
		margin: 0;
		padding: 0;
	}
	.nfooter a {
		padding: 0.5em;
		color:#333333;
	}
	/********************************
	**   FORM (Formulare)
	********************************/
	.error, .help-block{
		color:red;
	}
	.form-group{
		clear: both;
		padding-top: 0.5em;
	}
	.form-group legend{
		width: auto;
		padding: 0 0.5rem;
	}
	field-set{
		clear: both;
		padding-top: 0.5em;
	}
	label{
		margin-right: 1em;
		width: 10em;
	}
	div.input{
		max-width: 60%;
		float: left;
	}
	div.input.checkbox{
		width: inherit;
		max-width: 100%;
	}
	div.actions{
		clear: both;
		padding-top: 2em;
	}
	div.actions [type=submit]:hover{
		color:#FFFFFF;
	}
	/****************************************
	**  <button><a href..>  
	**  funktioniert nicht im IE11, deshalb
	**  <a type="button" ... oder
	**  <.. class="button" ...
	****************************************/
	a[type="button"],
	.button{
		display: inline-block;
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		border-top: 1px solid #bbb;
		border-left: 1px solid #bbb;
		border-right: 2px solid #888;
		border-bottom: 2px solid #888;
		padding: 0.2em 0.4em;
		margin-right: 0.5em;
		margin-top: 0.5em;	

	}
	.buttonsHorizontal{
		display:flex;
	}
	.button-l{
		font-size:large; 
		font-weight:bold; 
	}
	.button-xl{
		font-size:x-large; 
		font-weight:bold; 
	}
	.button-lang{
		padding:1rem;
		font-size:larger;
		font-weight:600; 
	}
	/************************************
	**  Allgemeines
	*************************************/
	.mittig{
		margin-left:auto; 
		margin-right:auto; 
	}
	.zentriert{
		text-align:center;
	}
	.margin-oben-l{
		margin-top:1.5em;
	}
	.margin-oben-xl{
		margin-top:2em;
	}
}
/*******************************
**  gallery
*******************************/
div.imgfilelink a{
	cursor:alias;
} 
div.imgclickenlarge a{
	cursor:zoom-in;
}
/*.ce-gallery figure{
	margin:revert;
}
.ce-image, .ce-gallery, .ce-gallery .ce-row{
	display:flex;
}
*/
/****************************
**  tinyAccordion
*****************************/
ul.tinyaccordion{
	/*border:1px solid #999;*/
	padding:0em;
}
ul.tinyaccordion li h3,
ul.tinyaccordion li h4{
/*	background-color:transparent; */
	color: var(--umwelt);
	width:max-content;
/* neu */
	background-color: #F0F0F0;
	width: 99%;
	margin-top: 10px;
	padding-top:10px;
	padding-bottom:10px;
}
ul.tinyaccordion .acc-section h2,
ul.tinyaccordion .acc-section h3, 
ul.tinyaccordion .acc-section h4 {
    display: none;
}
ul.tinyaccordion h4{
	background-image:url(/typo3conf/ext/sitepackage/Resources/Public/Images/plus-blau.png);
	background-position:left center;
	background-size:1rem;
	padding-left:25px;
	background-repeat:no-repeat;
}
ul.tinyaccordion h4.acc-selected {
    background: url('/typo3conf/ext/sitepackage/Resources/Public/Images/minus-blau.png') no-repeat left center;
	background-size:1rem;
}
ul.tinyaccordion li.acc-li h6{
	width:max-content; 
	font-size:initial;
	background-image: url(/typo3conf/ext/sitepackage/Resources/Public/Images/plus-blau.png);
	background-position-x: left;
	background-position-y: center;
	background-repeat: no-repeat;
	padding-left: 1em;
	text-decoration: underline;
	cursor: pointer;
	margin-bottom:2em;
}
ul.tinyaccordion li.acc-li h6::after {
	content:'mehr lesen'; 
}
ul.tinyaccordion li.acc-li h6.acc-selected::after {
	content:'weniger lesen'; 
}
ul.tinyaccordion li.acc-li h6+div{
	background-color:transparent;
}
ul.tinyaccordion li h5{
	font-size:1.5em;
}

ul.tinyaccordion header{
	padding:0;
	margin:0;	
}
ul.tinyaccordion div.acc-section{
	padding:0 0.5em;
	background-color:#f0f0f0;
/*	padding: 0.5em;
	background-color: #DDDDDD#f0f0f0;*/
}

/****************************
**  P R I N T 
*****************************/
@media print {
  
	.pagecontent, 
	article {
		display: inline !important;
	}  

	#banner, #keyVisual, nav,
	.highcharts-contextmenu ,
	.highcharts-menu-item,
	.highcharts-button   {
		display: none !important;
	} 
	#main{
		max-width:100%;
	}
	a.web2pdf{
		display:none;
	}
	#print_anbieter{
		display:block;
	}
	h1{
		page-break-before: avoid;
	}
	.pagecontent, article, .container, .row{
		page-break-before:avoid;
	}
	.pagecontent, .row{
		display:table;
	}
	.tx-tinyaccordion-pi1 a:after,
	.weiterfuehrendelinks a:after{ 
		content: " (" attr(href) ") "; 
		color: #333; 
		font-size: smaller; 
	}
	ul.tinyaccordion h3 , 
	ul.tinyaccordion h4 {
		border-bottom-left-radius: 0em !important;
		border-bottom-right-radius: 0em !important;
	}
	div.acc-section{
		height:auto !important;
	}

}	
/**********************************************
**   Banner-Navigation für FIS-Startseiten
**********************************************/
div.bannernav{
	position:relative;
	display: flex;
	align-items:center;
	background-size:cover;
	padding:1rem 0 2.8rem 0;
}
div.bannernav-items{
	width:100%;
	/*padding:1rem 0rem 2.5rem 0;*/
}
div.bannernav-items ul{
	list-style-type:none;
	display:flex;
	margin-right:auto !important;
	margin-left:auto !important;
	margin-bottom:0;
	padding:0rem 1rem;
/*	padding-left:0;*/
}
div.bannernav-items img{
	border:none;
	background-color:transparent;
	/*padding:1rem;*/
}
div.bannernav-items ul.zweireihig{
	flex-wrap:nowrap;
	/*max-width:90%;*/
	justify-content:center;
}
div.bannernav-items ul.zweireihig li.flex-item{
	/*width:33%;*/
}

/*********************************************
**   Login-Formular
**********************************************/
div.tx-felogin-pi1 h3,
div.tx-felogin-pi1 legend{
	display:none;	
}

/*********************************************
**   Menü Subpages im Stil von tinyAccordion
**********************************************/
.frame-type-menu_subpages li {
	list-style-type: none;
}
.frame-type-menu_subpages li a{
	font-size:1.5em;
	padding-left:1.5rem;
	background-image:url(/typo3conf/ext/sitepackage/Resources/Public/Images/linkpfeil-blau.jpg);
	background-position:left center;
	background-size:1rem;
	background-repeat:no-repeat;
	color:#0056b3;
}

/*********************************************
**  Styles für eigene ce-layout-Klassen
**********************************************/
.bg-hellgrau{
	background-color:#EEEEEE;
}
.30prozent{
	margin-left:35%;
	margin-right:35%;
	border:1px solid #CCCCCC;
}
.50prozent{
	margin-left:25%;
	margin-right:25%;
	border:1px solid #CCCCCC;
}
.col-2-spaltig{
	columns:2 20rem;
}
.frame-bannernav{
}

/*********************************************
** Style the tab
**********************************************/
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.frame-tabcontent{
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;	
}
/****************************
**  media queries
*****************************/
@media only screen and (max-width: 900px){
	div#keyVisual div{
		margin-top:-40px;
		height:46px;
	}
	div#keyVisual {
		height:6px;
	}
	div.bannernav{
		/*padding-bottom:6rem;*/
	}
}
/**************************************/
@media only screen and (max-width: 790px){
	.navbar-button{
		padding-bottom:0;
		display:flex;
		justify-content: flex-start;
	}
	/*.navbar{
		display:none;
	}*/
	div#keyVisual {
		height:6px;
	}
	div#keyVisual div{
		margin-top:-40px;
		height:46px;
	}
	div.bannernav{
		/*padding-bottom:5rem;*/
	}
}
/**************************************/
@media only screen and (max-width: 768px){
	.navbar{
		display:flex !important;
	}
}
/**************************************/
@media only screen and (max-width: 630px){
	div.bannernav{
		/*padding-bottom:4rem;*/
	}
}
/**************************************/
@media only screen and (max-width: 580px){
	header#kopf img{
		height:50px;
	}	
}
/**************************************/
@media only screen and (max-width: 480px){
	header#kopf{ 
		padding:1rem;
		justify-content:space-between;
	}
	header#kopf img{
		height:40px;
	}
	div.absender{
		max-height:45px;
		max-width:45%;
	}
	div.fis-titel{
		font-size:large;
	}
	div#keyVisual div{
		margin-top:-24px;
		height:25px;
	}
	div#keyVisual {
		height:3px;
	}
	div.bannernav{
		padding-bottom:1.5rem;
	}
	.ce-gallery{
		overflow:visible;
	}
	.ce-right .ce-gallery{
		float:none;
	}
}/**************************************/
@media only screen and (max-width: 360px){
	div.bannernav{
		padding-bottom:2rem;
	}
}