#pie-chart-color .column {
	  --color-1: rgba(255, 170, 170, 0.2);
	  --color-2: rgba(255, 170, 170, 0.4);
	  --color-3: rgba(255, 170, 170, 0.5);
	  --color-4: rgba(255, 170, 170, 0.6);
	  --color-5: rgba(255, 170, 170, 1.0);
	  --color-6: rgba(255, 170, 170, 1.0);
	  --color-7: rgba(255, 170, 170, 0.8);
	  --color-8: rgba(255, 170, 170, 0.6);
	  --color-9: rgba(255, 170, 170, 0.4);
	  --color-10: rgba(255, 170, 170, 0.2);
	}
	
	/*  Modul Horizontal Chart
	------------------------------------------------------------------------------------------ */

	#category-bar {
		margin-bottom: 15px;
		}

	/* 	double-bars */

	#double-bars-legend {
		position: absolute;
/* 		position:relative; */
		right: 0;
		top: -80px;
		width: 100%;
		overflow: visible;
		z-index: 99;
		}
		#double-bars-legend .legend-marker {
			margin-top: 10px;
			}
		#double-bars-legend .legend-marker span {
			width: 20px;
			height: 10px;
			background-color: #999;
			display: inline-block;
			border-radius: 2px;
			}
		#double-bars-legend .legend-text span {
			color: #777;
			font-size: 13px;
			display: inline-block;
			overflow: visible;
			}

	.bar-double.year {
		position:relative;
		height: 15px;
		}
		.bar-double.year label.y-label {
			display: none;
			}

	.top-label .y-label {
		color: #999;
		position: relative;
		font-family: serif;
		margin-bottom: 10px;
		display: block;
		}

	.double-bars .chart--horizontal .bar__container:after {
		   opacity: 1;
		}

	/* 	single-bars */

	.chart__axis-x,.chart__box,.chart__container,.chart__label-y {
		box-sizing:border-box;
		}

	.chart__container {
		position:relative;
		margin:0;
		padding-right:10px;
		overflow: hidden;
		}
	.double-bars.chart__container {
		margin-top: 100px;
		overflow: visible;
		}

	.chart__axis-y {
		position:relative;
		top:0;
		left:10px;
		z-index:1;
		padding:40px 0 5px;
		color:rgba(0,0,0,.6);
		text-align:left;
		font-weight:600;
		font-size:12px;
		color: #FFF;
		}

	.chart__axis-x {
		width:100%;
		color:rgba(0,0,0,.6);
		font-size:13px !important;
		padding:5px 5px 5px 5px;
		position: relative;
		}

	.chart__label-y {
		display:block;
		height:48px;
		position:relative;
		padding:0 15px 27px 0;
		line-height:1.1;
		}

	.chart__label-y:before {
		content:'';
		display:none;
		width:5px;
		height:1px;
		position:absolute;
		top:15px;
		right:0;
		background-color:#999;
		}

	.label-y__name {
		position:absolute;
		top:0;
		}

	.chart__label-x {
		display:inline-block;

		position:relative;
		right:0;
		padding-top:5px;
		text-align:right;
		width: calc(100%/3);
		width: 20%;
		}

	.chart__label-x:after,.chart__label-x:before {
		content:'';
		width:1px;
		}


	.chart__label-x:before {
		height:5px;
		position:absolute;
		top:-10px;
		right:10px;
		background-color:#999;
		}


	.chart__label-x:after {
		display:none;
		height:2000px;
		position:absolute;
		bottom:100%;
		right:10px;
		z-index:-1;
		margin-bottom:10px;
		background:repeating-linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.3) 4px,transparent 4px,transparent 13px);
		}


	.show-horizontal-lines .chart__label-x:after {
		display:block;
		}

	.chart__box {
		height:100%;
		width:100%;
		padding: 0;
		border-left:1px solid #999;
		border-bottom:0 solid #999;
		margin-left: 0;
	}
	.chart__box.bottom-line {
		height:100%;
		width:100%;
	/*
		position:absolute;
		top:0;
		right:0;
		bottom:0;
	*/
		padding: 0;
		border-left:1px solid #999;
		border-bottom:1px solid #999;
		margin-left: 0;
	}
	

	.chart--top {
		position:relative;
		padding-top:15px;
		}
		
	#category-bar .chart--top {
		position: relative;
		padding-top: 5px;
		}

	.chart--horizontal {
		color:rgba(0,0,0,.5);
		padding-top:5px;
		}

	.chart--horizontal .chart__bars {
		padding: 0;
		}
		.double-bars .chart--horizontal .chart__bars {
			padding: 0 0 1px;
			}

	.chart--horizontal .bar__container {
		width:100%;
		height:25px;
		position:relative;
		margin:0 0 22px;
		padding-right:10px;
		box-sizing:border-box;
		background-clip:content-box;
		}

		.chart--horizontal .bar__container:first-of-type {
		/* 	margin-top:5px; */
		}

	.chart--horizontal .bar__container:last-of-type {
		margin-bottom:25px;
		}
		.double-bars .chart--horizontal .bar__container:last-of-type {
		margin-bottom:15px;
		}

	.chart--horizontal .bar__container:before {
		content: '';
		width: .5rem;
		height: 1px;
		position: absolute;
		top: 12px;
		left: -.5rem;
		background-color: #000;
		}

	.chart--horizontal .bar__container.max .bar {
		background-color:#EE0000;
		}

	.chart--horizontal .bar__container.min .bar {
		background-color:#EE0000;
		}

	.chart--horizontal .bar {
		display:block;
		height:25px;
		border: #EE0000 solid 1px;
		position:absolute;
		top:0;
		right:100%;
		bottom:0;
		left:0;
		border-radius: 0 6px 6px 0;
		background-color:#EE0000;
		-webkit-transition:all 0 ease-in-out;
		-ms-transition:all 0 ease-in-out;
		-moz-transition:all 0 ease-in-out;
		-o-transition:all 0 ease-in-out;
		transition:all 0 ease-in-out;
		}

	.show-arrows .chart__box:after,.show-arrows .chart__box:before {
		content:'';
		width:0;
		height:0;
		position:absolute;
		border-style:solid;
		}

	.chart__container.visible .chart--horizontal .bar {
		-webkit-transition:all 2s ease-in-out;
		-ms-transition:all 2s ease-in-out;
		-moz-transition:all 2s ease-in-out;
		-o-transition:all 2s ease-in-out;
		transition:all 2s ease-in-out;
		right:0;
		}

	.show-arrows {
		padding-left: 5px;
		}

	.show-arrows .chart__box::after {
		top:7px;
		left:-4px;
		border-width:0 5px 8px;
		border-color:transparent transparent #999;
	}

	.show-arrows .chart__box:before {
		bottom:-4px;
		right:-2px;
		border-width: 5px 0 5px 8px;
		border-color:transparent transparent transparent #999;
	}

	.labels-above-bars .chart__axis-y {
		position:relative;
		top:-10px;
		left:10px;
		z-index:1;
		padding:40px 0 5px;
		color:rgba(0,0,0,.6);
		text-align:left;
		font-weight:600;
		font-size:12px;
	}

	.labels-above-bars .chart__axis-x {
		padding-left:0;
	}

	.labels-above-bars .chart--horizontal {
		padding-top:15px;
	}

	.labels-above-bars .chart--top {
		padding-top:0;
	}
	.chart--horizontal .bar__container:after {
		content:attr(data-value) "";
		position:absolute;
		top:58%;
		left:100%;
		opacity:0;
		padding-left:15px;
		font-size:20px;
		color: #EE0000;
		font-family: sans-serif;
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-o-transform:translateY(-50%);
		transform:translateY(-50%);
		-webkit-transition:opacity 0 ease-in-out 0;
		-ms-transition:opacity 0 ease-in-out 0;
		-moz-transition:opacity 0 ease-in-out 0;
		-o-transition:opacity 0 ease-in-out 0;
		transition:opacity 0 ease-in-out 0;
		}

	.chart--horizontal .bar__container { margin-bottom: 0.5rem; }

	.bar-hidden {
		font-size:17px;
		padding-left: 15px;
		color: #EE0000;
		min-height: 25px;
		visibility: visible;
		margin-bottom: 10px;
		margin-top: 5px;
		}

	.label-x-zero {
		display: inline-block;
		position: absolute;
		padding-top: 5px;
		left: -3px;
		left: 0;
		}
	.label-x-label {
		display: inline-block;
		position: absolute;
		padding-top: 5px;
		right: -3px;
		}

	.chart__axis-x:before {
		height: 5px;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #999;
		content: '';
		width: 1px;
		}

	label.y-label  {
		color: #FFF;
		left: 10px;
		position: absolute;
		margin-bottom: 0;
		margin-top: 3px;
		display: inline-block;
		}

	.chart--horizontal .bar__container { margin-bottom: 0.5rem; }
	.double-bars .chart--horizontal .bar__container:after { opacity: 1; }
		
/* 2024 */

	.bar-legend {
		font-size:17px;
		padding-left: 15px;
		color: #EE0000;
		min-height: 25px;
		visibility: visible;
		margin-bottom: 10px;
		margin-top: 5px;
		}


/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

	.box { background-color:#FFF; }

	.bar-hidden {
		visibility: hidden;
		margin: 0;
		}

	label.y-label  {
		color: #000;
		left:-150px;
		text-align: right;
		
		}

	.label-x-zero {
		display: inline-block;
		position: absolute;
		padding-top: 5px;
		left: 37px;
		}
		
	.chart__axis-y {
		position:relative;
		top:0;
		left: 10px;
		z-index: 1;
		padding: 40px 0 5px;
		text-align:left;
		font-weight:600;
		font-size:12px;
		color: #999;
		font-family: serif;
		}

	.chart__container:not(.labels-above-bars) .chart__axis-y {
		width:80px;
		padding:5px 0;
		text-align:right;
		font-size:14px;
		font-weight:700;
		top:0;
		left:0;
		}

	.chart__axis-x {
		padding-top: 5px;
		padding-left: 40px;
		font-size:13px;
		}

	.chart__axis-x:before {
		height: 5px;
		position: absolute;
		top: 0;
		left: 40px;
		background-color: #999;
		content: '';
		width: 1px;
		}

	.show-arrows .chart__box::after {
		top:7px;
		left:36px;
		border-width:0 5px 8px;
		border-color:transparent transparent #999;
		}

	.chart__label-y:before {
		display:block;
		}

	.chart__container:not(.labels-above-bars) .label-y__name {
		position:absolute;
		top:15px;
		right:20px;
		bottom:auto;
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-o-transform:translateY(-50%);
		transform:translateY(-50%);
		}

	.chart__label-x:before {
		top:-5px;
		right:20px;
		}

	.chart__label-x:after {
		right:20px;
		}

/*
	.chart__label-x:nth-child(2n+1) {
		opacity: 1;
		}

*/
	.chart__box {
		padding: 0;
		margin-left: 40px;
		width:calc(100% - 40px);
		}

	.labels-above-bars .chart__axis-y {
		top:-10px;
		color: #999;
		}

	.labels-above-bars .chart__box {
		padding: 5px 15px 0 10px;
		width:100%;
		}

	.chart__label-x {
		width: calc(100%/4);
		width:20%;
		}

	.chart--horizontal .bar__container:after {
		opacity: 1;
		}

	.double-bars .chart--horizontal .chart__bars:first-of-type {
		padding: 15px 0 1px;
		}

	/* 	double-bars */

	.double-bars.chart__container {
		margin-top: 0;
		overflow: visible;
		}

	#double-bars-legend {
		position: absolute;
		right: 0;
		top: 0;
		width: auto;
		overflow: visible;
		width: 140px;
		}

	.double-bars .chart--horizontal .bar__container:before {
		visibility: hidden;
		}

	.bar-double.year {
		position:relative;
		height: 15px;
		}
		.bar-double.year:before {
			content: '';
			width: 5px;
			height: 1px;
			position: absolute;
			top: 8px;
			left: -5px;
			background-color: #999;
			}

	.bar-double.year  label.y-label {
		line-height: 1;
		margin-top: 2px;
		display: block;
		}

	.top-label .y-label {
		color: #000;
		position: relative;
		font-family: serif;
		margin-bottom: 5px;
		display: none;
		}

	.chart__label-x {
		width: calc(100%/4);
		width:18%;
		}
	.produkte-nachhaltige-kredite .chart__label-x {
		width: calc(100%/4);
		width:18%;
		}

	}

	/*  legend-chart-area
	------------------------------------------------------------------------------------------ */
.chart-header h3 {
	font-family: 'Sparkasse Serif Web', Georgia, 'Times New Roman', Times, serif;
	font-size: 20px;
	font-weight: normal;
   color: #000 !important;
	margin-bottom: 15px;
	margin-top: 0;
	letter-spacing: 0px;
	line-height: 1.2;
}
.chart-header h4 {
font-family: 'Sparkasse Serif Web', Georgia, 'Times New Roman', Times, serif;
font-weight: normal;
font-size: 16px;
line-height: 1.2;
margin: 0 0 5px 0;
font-weight: normal;
color: #000 !important;
}

	/*  legend-chart-area
------------------------------------------------------------------------------------------ */

.content-modul.gray-border::before { display: block; content: ""; border-bottom: 1px solid #AAA; width: 100%; margin: 0 0 1rem 0; }  
.content-modul.gray-border::after { display: block; content: ""; border-bottom: 1px solid #AAA; width: 100%; margin: 0 0 1rem 0; }  
.content-modul.gray-border-top::before { display: block; content: ""; border-bottom: 1px solid #AAA; width: 100%; margin: 0; }  

.content-caption { font-size: .825rem; color: #666; }

.modul-content h4 {
	font-family: 'Sparkasse Web', Arial, Helvetica, sans-serif;
	margin-bottom: 1rem;
	font-size: 1.1rem;
	color: #EE0000!important;
	font-weight: 500;
	}

.donat_template_legend.modul-id-12447 {}
.donat_template_legend.modul-id-12447 #legend-chart {
  background-color: transparent;
  width: 250px;
  height: 250px;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-top: 1rem;
  float: left;
}
.donat_template_legend.modul-id-12384 {}
.donat_template_legend.modul-id-12384 #legend-chart {
background-color: transparent;
width: 250px;
height: 250px;
margin-bottom: 1rem;
margin-left: 1rem;
margin-top: 1rem;
float: left;
}



.timeline-wrapper {
  max-width: 1140px;
  margin: 0 auto;
}

.timeline-wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.timeline-wrapper ul::after {
  content: "";
  display: block;
  clear: both;
}
.timeline-wrapper ul.timeline {
  display: flex;
  flex-wrap: wrap;
  padding: 40px 30px 0 30px;
  margin-top: 90px;
  font-size: .825rem;
}
.timeline-wrapper ul.timeline > li { width: calc( 100% / 5 ); }
.timeline-wrapper ul.timeline > li:nth-of-type(1) > .content { transform: translateY(calc(-100% - 24px)); }
.timeline-wrapper ul.timeline > li:nth-of-type(3) > .content { transform: translateY(calc(-100% - 24px)); }
  
.timeline-wrapper ul .year {
  color: #000;
  background: #EEE;
  display: block;
  position: relative;
  padding-left: 24px;
  line-height: 24px;
  font-weight: normal;
  font-size: 1rem;
}
.timeline-wrapper ul .year::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  background: #cbcbcb;
  border-radius: 50%;
  left: -20px;
  top: calc( (30 - 20) / 2 * -1px );
}
.timeline-wrapper ul .year.new {
  border-radius: 0 24px 24px 0;
}
.timeline-wrapper ul .year.new::after {
  content: "";
  width: 5px;
  height: 5px;
  display: block;
  border: 20px solid #cbcbcb;
  box-sizing: border-box;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  right: -30px;
  top: -9.5px;
}
.timeline-wrapper ul .content {
  border-left: 8px solid #cbcbcb;
  margin-left: -8px;
  padding: 15px 0;
  padding-right: 0;
}
.timeline-wrapper ul .content > li {
  padding-left: 20px;
  border-bottom: 4px solid #cbcbcb;
  padding-bottom: 8px;
  position: relative;
  margin-left: -8px;
  min-height: 100px;
}
.timeline-wrapper ul .content > li:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.timeline-wrapper ul .content > li::before {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbcbcb;
  left: 2px;
  top: 8px;
}
.timeline-header h5 { font-size: 1rem; border-bottom: 6px solid #EE0000;  color: #000; padding-bottom: 0.5rem; font-weight: 300; }
.timeline-caption { font-size: 1rem; border-top: 6px solid #b0b0b0; padding-top: 0.5rem; color: #000; }
.timeline-wrapper ul .year.year-red::before { background: #EE0000; }
.timeline-wrapper ul .content.content-red { border-left: 8px solid #EE0000; }

@media screen and (max-width: 991px) {
  .timeline-wrapper ul.timeline { display: block; padding-top: 0; }
  .timeline-wrapper ul.timeline > li { width: 100%; }
  .timeline-wrapper ul.timeline > li:nth-of-type(odd) .content { transform: none; }
}