.charts-css {
	--color-1: rgba(0, 94, 138, .75);
	--color-2: rgba(196,196,198,.75);
	--color-3: rgba(102,184,222,.75);
	--color-4: rgba(133,134,138,.75);
	--color-5: rgba(204,231,244,.75);
	--color-6: rgba(0,156,213,.75);

	--color-1: rgba(177, 215, 232, .75);
	--color-2: rgba(235,207,207,.75);
	--color-3: rgba(203,222,191,.75);
	--color-4: rgba(224,210,235,.75);
	--color-5: rgba(237,224,190,.75);
	--color-6: rgba(226,225,226,.75);

	--color-1: rgba(151,202,224, .75);
	--color-2: rgba(228,191,191,.75);
	--color-3: rgba(186,211,170,.75);
	--color-4: rgba(214,195,228,.75);
	--color-5: rgba(231,214,168,.75);
	--color-6: rgba(216,216,216,.75);

	--color-1: rgba(82, 185, 234, 0.75);
	--color-2: rgba(226, 226, 234, 0.75);
	--color-3: rgba(152, 212, 240, 0.75);
	--color-4: rgba(201, 204, 211, 0.75);
	--color-5: rgba(208, 233, 245, 0.75);
	--color-6: rgba(157, 163, 166, 0.75);
}

.charts-css.legend-rhombus li::before, .charts-css.legend-square li::before {
	border: none;
	border-radius: 0;
}

.ukl-chart .charts-css tr td .data {
	z-index: 1;
	font-size: clamp(10px, 2vw, 14px);
	line-height: 1.3em;
	font-weight: 400;
}

.chart-default .charts-css.show-data-on-hover tr:first-child .data {
	opacity: 1; 
}

.chart-pie .charts-css.show-data-on-hover:first-child .data {
	opacity: 1;
}

.charts-css tr .always-hide {
	display: none;
}

.chart-default .charts-css.line {
	width: 90%;
}

.chart-default.combined .charts-css.line tbody,
.chart-default.combined .charts-css.column tbody {
	aspect-ratio: 16/3;
}

.chart-default.combined .chart-table:nth-child(2) {
	display: none;
}

.ukl-chart.use-bar-flex .chart-default.combined {
	display: flex;
	flex-direction: row-reverse;
}
/*
.chart-default.combined:has(.charts-css.bar) {
	display: flex;
	flex-direction: row-reverse;
}
*/

@media screen and (max-width: 640px) {
	.ukl-chart .charts-css tbody tr td {
		font-size: 0.5rem;
	}

	.ukl-chart .charts-css.column {
		--aspect-ratio: 4/3;
	}

	.ukl-chart .charts-css.bar {
		--labels-size: 40px;
	}
	.ukl-chart .chart-default.combined .charts-css.bar {
		--labels-size: unset;
	}
}

/*
.charts-css tbody tr td:first-of-type {
	color: white;
}
*/

.charts-css.show-heading caption,
.chart-default .chart-table caption {
	margin-bottom: 2rem;
}


.chart-variant {
	width: 2rem;
	height: 2rem;
	background-image: url("../images/column_active.svg");
	background-size: cover;
	filter: grayscale(1);
	//opacity: 0.4;
	margin: 0 auto;
}

.chart-variant.label-column-stacked  {
	background-image: url("../images/column_stacked_active.svg");
}
.chart-variant.label-bar  {
	background-image: url("../images/bar_active.svg");
}
.chart-variant.label-bar-stacked {
	background-image: url("../images/bar_active_stacked.svg");
}
.chart-variant.label-pie {
	background-image: url("../images/pie_active.svg");
}
.chart-variant.label-line  {
	background-image: url("../images/line_active.svg");
}
.chart-variant.label-table {
	background-image: url("../images/table_active.svg");
}

#variant {
	display: flex;
	gap: 2rem;
	margin: 1rem 0;
	flex-wrap: wrap;
}

@media screen and (max-width: 640px) {
	#variant {
		gap: 1rem;
	}
}

#variant label {
	cursor: pointer;
	flex-shrink: 1;
}

#variant label span {
	text-align: center;
	display: block;
	line-height: 1rem;
	margin-top: 0.2rem;
}

#variant label > * {
	opacity: 0.5;
}

#variant label:hover > * {
	opacity: 1;
	filter: unset;
}

.ukl-chart {
	color: rgb(112, 112, 112);
	overflow: hidden;
}

.ukl-chart input[type="radio"] {
  opacity: 0 !important;; /* hidden but still tabable */
  position: absolute;
}

.ukl-chart input[type="radio"]:checked ~ * {
	opacity: 1 !important;
	filter: unset;
}


.chart-default,
.chart-pie {
	margin-bottom: 2rem;
	overflow-x: auto;
}

.chart-pie,
.passiva-pie {
	display: flex;
	gap: 2rem;
}

.chart-pie.inactive,
.chart-default.inactive {
	display: none;
}

.charts-css.stacked td {
	--end: unset !important;
}

.chart-table {
	width: 100%;
}

.chart-default .chart-table {
	margin-top: 1em;
	border-spacing: 10px;
	border-collapse: separate;
}


.chart-table td {
	text-align: center;
}

.chart-default .charts-css .gesamt {
	display: none;
}

.charts-css.legend {
	width: fit-content;
	border: none;
	font-size: 0.7rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}


.legend-misc {
  width: 100%;
  text-align: right;
  margin: 2em 0;
  font-size: 0.7rem;
}


.ukl-chart table.chart-table caption {
	display: none;
}


.acc-item {
	border-bottom: 1px solid #707070;
}

.accordion {
	position: relative;
	background-color: white;
	color: #707070;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1.2rem;
	font-weight: 300;
	transition: 0.4s;
}

.accordion::after {
	position: absolute;
	right: 1rem;
	content: "▷";
	transition: all 0.2s ease-out;
}

.accordion:hover {
	background-color: #f0f0f0;
}

.accpanel {
	padding: 0 18px;
	/*max-height: 0;
	overflow: hidden;*/
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s ease-out;
}

.acc-item.active .accpanel {
	/*max-height: 2000px;*/
	grid-template-rows: 1fr;
}

.acc-item.active .accordion::after {
	rotate: -90deg;
	color: #008ac9;
}

.zahlen-tabs {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-bottom: 3rem;
}

.zahlen-tab {
	width: 100%;
	background-color: white;
	cursor: pointer;
	padding: 18px;
	border: none;
	text-align: center;
	outline: none;
	font-size: 2rem;
	font-size: clamp(1rem, 3vw, 2rem);
	font-weight: 300;
	letter-spacing: 2.16px;
	transition: 0.4s;
	text-transform: uppercase;
	border-bottom: 2px solid red;
	opacity: 0.7;
}

.zahlen-tab.ukl {
	color: #008ac9;
	border-bottom: 2px solid #008ac9;
}
.zahlen-tab.mf {
	color: #707070;
	border-bottom: 2px solid #707070;
}

.zahlen-tab.active {
	opacity: 1;
	font-size: 2.2rem;
	font-size: clamp(1.1rem, 3.2vw, 2.2rem);
	border-bottom-width: 3px;
}

.ukl-accordion,
.mf-accordion {
	display: none;
	opacity: 0;
	visibility: hidden;
	height: 0;
	transition: 0.4s;
}

.ukl-accordion.active,
.mf-accordion.active {
	display: block;
	opacity: 1;
	visibility: visible;
	height: 100%;
}