:root {
--lanuv-klima: #003064;
--lanuv-umwelt: #009fe3;
--button-hover: #9D9D9C;
--button-primary: #495057;
--success: #0056b3;
--back-grey: #2b2b2b;
--caroussel-grey: #222222;
--foot-section-grey: #666666;
--footer-background: #f8f9fa;
}
/*
var(--button-hover);
var(--button-primary);
var(--success);
var(--back-grey);
var(--footer-background);
var(--foot-section-grey);
*/

#page-content{
	min-width:20rem;
	}
#footer_logos,
#head_logos
{
	padding:1rem;
}
#footer_logos img, 
#head_logos img{
	height: 4rem;
	width: auto;
}
div#kfam_logo img {
	height: 3rem;
	width: auto;
    margin-top: 0.2em;
} 
#banner img{
	width: 100%;
	height: auto;
	max-height: 300px;
	padding-bottom: 3px;
}
div#border img{
	max-height:250px;
}
div#keyVisual {
	position: relative;
    background-color: var(--lanuv-umwelt);
    width: 100%;
    height: 9px;
    z-index: 1;
}
div#keyVisual div {
    float: right;
    margin-top: -60px;
    height: 69px;
    width: auto;
	max-width:33%;
    position: absolute;
    right: 0;
}
div#keyVisual img {
	height:100%;
	width:100%;
}


/******************************************************
* Bootstrap-Package Mods
******************************************************/

.frame-container 
{
	max-width: 1140px;
	}

/* Erstmal nur in Überschriften angewandt. Mit "body" aber auch für alle Texte möglich */
h1,h2,h3,h4,h5 {
	hyphens: auto;
}


/******************************************************
* Buttons Mods
******************************************************/

.btn-primary {
	background-color: var(--button-primary);
	border-color: var(--button-primary);
}
.btn-primary:hover {
	background-color: var(--button-hover);
	border-color: var(--button-hover);
}
.btn-primary:focus,
.btn-primary.focus {
 background-color:var(--button-hover);
 border-color:var(--button-hover);
 box-shadow:0 0 0 0.2rem var(--button-hover);
}
.btn-primary.disabled,
.btn-primary:disabled {
 background-color:var(--button-hover);
 border-color:var(--button-hover);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
 background-color:var(--button-hover);
 border-color:var(--button-hover);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
 box-shadow:0 0 0 0.2rem var(--button-hover);
}

/***** Scroll-Top Button *****/
.scroll-top:active, .scroll-top:focus, .scroll-top:hover {
	background-color: var(--button-hover);
}

/***** Login Success *****/
.text-success {
    color: var(--success) !important;
}

/***** Zurück zur (Cluster-) Übersicht *****/
.texticon a {
	color: var(--back-grey);
}

/******************************************************
* Carousel Mods
******************************************************/

.carousel-item-type-header .carousel-text-inner {
    width: 65%;
    color: var(--caroussel-grey);
	position: absolute;
	left: 50px; 
	top: 50px;
}
.carousel .carousel-item h1,
.carousel .carousel-item h2,
.carousel .carousel-item h3,
.carousel .carousel-item h4,
.carousel .carousel-item h5,
.carousel .carousel-item h6 {
    background-color: var(--white);
	opacity: 0.8;
	padding: 10px;
	border-radius: 2px;
}
.carousel-header {
	width: max-content;
}

.carousel .carousel-control {
 transition:opacity 0.4s ease-in-out 0s;
 z-index:1;
 opacity: 0.8; /* Anpassung */
}
.carousel .carousel-indicators {
	transition:opacity 0.4s ease-in-out 0s;
	z-index:1;
	opacity: 1; /* Anpassung */
}
.carousel .carousel-control-prev .carousel-control-icon {
	left:0;
}
.carousel .carousel-control-next .carousel-control-icon {
	right:0;
}


/******************************************************
* Cards Mods
******************************************************/

.card {
	color:var(--back-grey)
}
.card a:not(.btn) {
	color:var(--back-grey);
}
.card a:not(.btn):hover {
	color:var(--back-grey)
}
/* customCards */
div#customCards .card-title {
	font-size: 1.5em;
	text-align: center;
}
div#customCards .card-body { /* Unterschrift näher ranholen */
	padding: 0.5rem 1.5rem 0.5rem 1.5rem;
}
div#customCards .card-footer {
	display:none; /* "Mehr erfahren" Button ausgeblendet */
}
div#customCards .card-img-top img {
	width: 100%;
	height: 200px;
	object-fit: fill;
} 
/* nur für ClusterCards */
.clusterCards .card-img-top img:hover {
	opacity: 0.4;
	transition: .3s ease-in-out;
} 
.clusterCards .card-img-top img{
	transition: .3s ease-in-out;
}
.clusterCards .card-img-top {
	background-color: var(--lanuv-klima);
}


/* Neuigkeiten */
div#news .card-title {
	font-size: 1.5em;
}
div#news .card-body {
	padding-bottom: 0px;
}



/******************************************************
* Footer (Fußleiste) Mods
******************************************************/

.footer-section-meta {
	background-color: var(--footer-background);
	font-size: 90%;
	padding: 1rem;
	padding-bottom: 4rem;
}
/*
.footer-section-meta div.frame-container {
	margin-left: 0px;
	padding-left: 0px;
}
*/
.footer-section-meta a:not(.btn) {
		color:var(--foot-section-grey)
}
.footer-section-meta a:not(.btn):hover,
.footer-section-meta a:not(.btn):focus {
	color:var(--foot-section-grey)
}
.footer-meta {
    overflow: hidden;
    padding-right: 15px;
}
.footer-copyright {
	padding-right: 25px;
}