/*
* Mediaqueries: width 1200 / 992 / 768 / 576
*
*/
:root{
	--indi-icon-size: 100px;
	--figure-image: 100px;
	--icons: 8;
	--wf-icons: 3;
	--wf-icon-size: 100px;
	--trend-icon-size: 1.5em;
	--gap: 40px;
	--gap-trend: 10px;
	--navbar-width: 25em;
	--vcard-width: 30em;
	--vcard-width-txt: 24em;
	--spiegel-width: 20%;
	--nav-padding-top: 0.5rem;
	--nav-padding-left: 2.5rem;
	--nav-min-width: 20rem;
	--nav-breadcrumb-padding: 20px;
}
@media(min-width:1201px) {
	:root{
		--indi-icon-size: 100px;
		--figure-image: 100px;
		--icons: 8;
		--wf-icons: 3;
		--wf-icon-size: 100px;
		--gap: 40px;
		--gap-trend: 10px;
		--trend-icon-size: 1.5em;
		--navbar-width: 25em;
		--vcard-width: 30em;
		--vcard-width-txt: 24em;
	}

/* Betrifft: Grafik Download: Grafik soll hoeher werden / Seitenverhaeltnis */
	div.hc-grafik 
	{
		max-height: unset;
		height: 550px;
	}
}
@media(max-width:1200px) {
	:root{
		--indi-icon-size: 100px;
		--figure-image: 100px;
		--icons: 7;
		--wf-icons: 3;
		--wf-icon-size: 100px;
		--gap: 40px;
		--trend-icon-size: 1.5em;
		--navbar-width: 25em;
		--vcard-width: 30em;
		--vcard-width-txt: 24em;
	}
/*	
   div#customCards .card-img-top img {
        height: 180px;
    }
*/
}

@media(max-width:992px) {
	:root{
		--indi-icon-size: 90px;
		--figure-image: 90px;
		--icons: 6;
		--wf-icons: 2;
		--wf-icon-size: 100px;
		--gap: 30px;
		--trend-icon-size: 1.5em;
		--navbar-width: 25em;
		--vcard-width: 20em;
		--vcard-width-txt: 14em;
		--figure-image: 75px;
		--spiegel-width: 25%;
		--nav-padding-left: 20px;
	}
/*
	.card-group-element-columns-3 .card-group-element-item {
		width: calc(100% / 2);
	}
*/
	#head_logos img{
		height:3rem;
	}
	div#kfam_logo img {
		height: 2.25rem;
	}
	div#keyVisual {
		height:6px;
	}
	div#keyVisual div{
		margin-top: -40px;
		height: 46px;
	}
	#footer_logos a img {
		height: 3em;
	}
}

@media (max-width: 768px) {
	:root{
		--indi-icon-size: 80px;
		--figure-image: 80px;
		--icons:5;
		--wf-icons: 2;
		--wf-icon-size: 80px;
		--gap: 30px;
		--trend-icon-size: 1.5em;
		--navbar-width: 25em;
		--vcard-width: 25em;
		--vcard-width-txt: 20em;
		--spiegel-width: 30%;
	}
	ol.breadcrumb 
	{
		font-size: 80%;
	}	
	#head_logos img{
		height:2.5rem;
	}
	div#kfam_logo img {
		height: 2.0rem;
	}
    div#customCards .card-img-top img {
        height: 220px;
	}
/*	
	.card-group-element-columns-3 .card-group-element-item {
		width: 100%;
	}
*/	
	#footer_logos a img {
		height: 2.5em;
	}
	.table-trend div.frame-container div.textpic-gallery {
		width: 15%
	}
	.table-trend div.frame-container div.textpic-text {
		width: 85%;
	}
	.weiterfuehrendelinks figcaption.caption,
	.icongruppe figcaption.caption 
	{
		font-size: 0.85rem; /*Originalgroesse*/
	}
	.col-8 {
		min-width: 100%;
	}
	.col-4 {
		min-width: 100%;
	}
	#aktuell-block div.frame-space-before-extra-small {
		margin-top: 1rem;
	}
}
@media (max-width: 576px) {
	:root{
		--indi-icon-size: 80px;
		--figure-image: 80px;
		--icons: 4;
		--wf-icons: 1;
		--wf-icon-size: 80px;
		--gap: 20px;
		--trend-icon-size: 1.2em;
		--navbar-width: 20em;
		--vcard-width: 25em;
		--vcard-width-txt: 20em;
		--nav-breadcrumb-padding: 0;
	}
	#footer_logos a img, 
	#head_logos img
	{
		height:2.0rem;
	}
	div#kfam_logo img {
		height: 1.75rem;
	}
	div#keyVisual {
		height:4px;
	}
	div#keyVisual div{
		margin-top: -28px;
		height: 32px;
	}	
	div#customCards .card-img-top img {
        height: 200px;
    }
	.table-trend div.frame-container div.textpic-gallery {
		width: 20%
	}
	.table-trend div.frame-container div.textpic-text {
		width: 80%;
	}
	.dpsir .gallery-item {
		display: block;
		min-width:6em;
		margin: 0em; 
		float: left;
	}
	.dpsir figure.image img{
		width:70px;
		height:auto;
		padding:2px;
	}
	#farbschema.service .textpic-gallery{
		display: none;
	}
	#farbschema.service .textpic-text{
		width: 100%;
	}
}
@media (max-width: 400px) {
	:root{
		--indi-icon-size: 0px;
		--icons: 3;
		--wf-icons: 1;
		--wf-icon-size: var(--figure-image);
		--gap: 20px;
		--trend-icon-size: 1.2em;
		--navbar-width: 25em;
		--vcard-width: 25em;
		--vcard-width-txt: 20em;
		--gap: 0;
	}

	.indikator-symbol .textpic-left .textpic-gallery,
	.einleitung .textpic-left .textpic-gallery-item,
	.einleitung .textpic-gallery
	{
		display:none;
	}
	.indikator-symbol .textpic-left .textpic-text h2,
	.einleitung .textpic-left .textpic-text h2
	{
		font-size: 1.5rem;
	}

	#footer_logos img, 
	#head_logos img
	{
		height:1.5rem;
	}
	ol.breadcrumb 
	{
		font-size: 70%;
	}	
	.vcard .vcard_foto {
		display: none;
	}
	#farbschema.service .textpic-gallery,
	div #spiegel .textpic-gallery {
		display: none;
	}
	#farbschema.service .textpic-text,
	div #spiegel .textpic-text {
		width: 100%;
	}
	.texticon-icon {
		display: none;
	}
}

@media screen and (max-height: 350px) {
	div #startbild {display: none;}
	div#keyVisual img {display: none;}
	figure.startbild_quer 
	{
		overflow: visible;
		margin: 0.3em;
	}
}

@media not screen and (max-height: 350px) {
	div #startbild-quer {display: none;}
}

/* --------------------------------  */
.indikator-symbol .textpic-left .textpic-text,
.einleitung .textpic-left .textpic-text
{
	width: calc(100% - calc(var(--indi-icon-size) + var(--gap)));
	/* padding-left: 0px; */
}

.indikator-symbol img,
.einleitung img
{
	width: var(--indi-icon-size);
	height: var(--indi-icon-size);
}

.icongruppe .gallery-item-size-1 
{
	width: calc(100%/var(--icons));
}

.weiterfuehrendelinks .gallery-item-size-1 {
	width: calc(100%/var(--wf-icons));
}

.weiterfuehrendelinks figure.image picture img{
	width: var(--wf-icon-size);
}

.trend .textpic-gallery
{
	width: var(--trend-icon-size);
}
.trend .textpic-text
{
	width: calc(100% - var(--trend-icon-size) - var(--gap-trend));
}
.trend .textpic 
{
	gap: var(--gap-trend);
}
.navbar-nav .dropdown-menu {
	width: var(--navbar-width);
}
.vcard {
	width: var(--vcard-width);
}
.vcard .vcard_texte{
	width: var(--vcard-width-txt);
	hyphens; auto;
}
.icongruppe figure.image img {
	width: var(--figure-image);
}
.weiterfuehrendelinks figure.image img {
	width: var(--figure-image);
}
div #spiegel .textpic-gallery {
	width: var(--spiegel-width);
}
div #spiegel .textpic-text {
	width: calc(100% - var(--gap) - var(--spiegel-width));
}
.textpic
{
	gap: var(--gap);
}

nav{
	padding: var(--nav-padding-top) var(--nav-padding-left) !important;
	min-width: var(--nav-min-width);
}

.breadcrumb-section .container
{
	padding-right: var(--nav-breadcrumb-padding);
	padding-left: var(--nav-breadcrumb-padding);
}

ul.list-normal
{
	padding-left: var(--nav-padding-left);
}
div.form-container /* Barrierefreiheit */
{
	padding: var(--nav-padding-left);
}