/* ===============================
BASE MODULE
=============================== */
.grafiken-1-und-2-spaltig-module {
	--space-section-desktop: 170px;
	--space-section-mobile: 40px;

	.mb-6 {
		margin-bottom: var(--space-section-desktop);
	}

	@media (max-width: 767px) {
		.mb-6 {
			margin-bottom: var(--space-section-mobile);
		}
	}
}

.fixed-sidebar-search { display: none; }

/* ===============================
HEADERS
=============================== */
.grafiken-1-und-2-spaltig-module .chart-header {
	border-top: 2px solid #000;
	margin-bottom: 30px;
	padding-top: 30px;
}

/* ===============================
CHART LEGEND
=============================== */
.grafiken-1-und-2-spaltig-module .legend-container {
	margin-bottom: 60px;
}

.grafiken-1-und-2-spaltig-module .legend-list {
	gap: 24px;
}

@media (max-width: 991.98px) {
	.grafiken-1-und-2-spaltig-module .legend-container {
		margin-bottom: 25px;
	}
	.grafiken-1-und-2-spaltig-module .legend-list {
		column-gap: 24px;
		row-gap: 8px
	}
}

.grafiken-1-und-2-spaltig-module .legend-list .swatch {
	box-shadow: inset 0 0 0 1px #0000001a;
	height: 13px;
	width: 13px
}

/* ===============================
CHART LEGEND INTERACTIVITY
=============================== */
.grafiken-1-und-2-spaltig-module .legend-list li {
	cursor: pointer;
	user-select: none;
	transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

.grafiken-1-und-2-spaltig-module .legend-list li.inactive span {
	text-decoration: line-through;
	opacity: 0.6;
}


/* ===============================
CHART CONTAINERS
=============================== */
.grafiken-1-und-2-spaltig-module .chart-container {
	position: relative;
	width: 100%;
}

.grafiken-1-und-2-spaltig-module .canvas-wrapper {
	position: relative;
	width: 100%;
	height: 50vh;
	min-height: 300px;
	max-height: 700px;
}

.grafiken-1-und-2-spaltig-module .chart--bar .canvas-wrapper {
	height: 50vh;
	max-height: 725px;
}

.grafiken-1-und-2-spaltig-module .chart--pie .canvas-wrapper {
	height: 40vh;
	max-height: 500px;
}



/* ===============================
COUNTUP
=============================== */
.grafiken-1-und-2-spaltig-module .countup-container {
	container-type: inline-size;
	text-align: center;
}

.grafiken-1-und-2-spaltig-module .countup-number {
	font-weight: 700;
	line-height: 1;
	color: #00da7a;
	font-size: clamp(36px, 33cqw, 250px);
}

@supports not (font-size: 1cqw) {
	.grafiken-1-und-2-spaltig-module .countup-number {
		font-size: clamp(36px, 10vw, 120px);
	}
}

.grafiken-1-und-2-spaltig-module .chart-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.grafiken-1-und-2-spaltig-module .chart-footer .equal-sign {
	line-height: 1;
	margin: 16px 0 24px;
	font-weight: 600;
}

.grafiken-1-und-2-spaltig-module .chart-footer .subtext-accent {
	font-size: 28px;
	font-weight: 600;
	color: #B3B3B3;
}

@media (max-width: 767px) {
	.grafiken-1-und-2-spaltig-module .chart-footer .equal-sign {
		margin-top: 30px;
		margin-bottom: 25px;
	}
	.grafiken-1-und-2-spaltig-module .chart-footer .subtext-accent {
		font-size: 20px;
	}
}

@media (max-width: 576px) {
	.grafiken-1-und-2-spaltig-module .chart-footer .equal-sign {
		margin-top: 25px;
		margin-bottom: 20px;
	}
	.grafiken-1-und-2-spaltig-module .chart-footer .subtext-accent {
		font-size: 18px;
	}
}

/* ===============================
BADGE
=============================== */
.grafiken-1-und-2-spaltig-module .chart-badge {
	align-items: center;
	background-color: #00da7a;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	position: fixed;
	left: 100%;
	right: 0;
	translate: -20% -30%;
	height: 290px;
	width: 290px;

	@media (max-width: 1648px) {
		height: 200px;
		width: 200px;
	}

	@media (max-width: 991.98px) {
		right: 0;
		left: unset;
		translate: 0 -30%;
		height: 140px;
		width: 140px;
	}

	@media (max-width: 400px) {
		display: none;
	}
}

.badge-parent {
	transform: translateZ(0);
}

.grafiken-1-und-2-spaltig-module .chart-badge .badge-content {
	transform: rotate(15deg);
	color: #fff;
	text-align: center;
}

.grafiken-1-und-2-spaltig-module .chart-badge .badge-number {
	font-size: 85px;
	font-weight: 700;
	line-height: 1;

	@media (max-width: 1648px) {
		font-size: 58px;
	}

	@media (max-width: 991.98px) {
		font-size: 43px;
	}
}

.grafiken-1-und-2-spaltig-module .chart-badge .badge-text {
	font-size: 25px;
	line-height: 1.2;

	@media (max-width: 1648px) {
		font-size: 18px;
	}

	@media (max-width: 991.98px) {
		font-size: 14px;
	}
}

/* ===============================
EDUCATION TABLE
=============================== */
.grafiken-1-und-2-spaltig-module .education-table {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-top: 1px solid #000;
	border-collapse: collapse;
}

.grafiken-1-und-2-spaltig-module .education-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #000;
}

.grafiken-1-und-2-spaltig-module .education-label {
	flex: 1;
	padding: 10px 10px 10px 0;
	color: #000;
	display: flex;
	align-items: center;
}

.grafiken-1-und-2-spaltig-module .education-value {
	flex: 0 0 120px;
	text-align: right;
	padding: 10px 8px;
	font-weight: 700;
	display: flex;
	align-items: start;
	justify-content: flex-end;
}

/* Color Modifiers */
.grafiken-1-und-2-spaltig-module .bg-red-1  { background-color: #BF272D; color: #fff; }
.grafiken-1-und-2-spaltig-module .bg-red-2  { background-color: #FF021F; color: #fff; }
.grafiken-1-und-2-spaltig-module .bg-green-1{ background-color: #008F70; color: #fff; }
.grafiken-1-und-2-spaltig-module .bg-green-2{ background-color: #00DA7A; color: #000; }
.grafiken-1-und-2-spaltig-module .bg-green-3{ background-color: #80FADE; color: #000; } 
.grafiken-1-und-2-spaltig-module .bg-grey-1 { background-color: #E6E6E6; color: #000; }
.grafiken-1-und-2-spaltig-module .bg-grey-2 { background-color: #B3B3B3; color: #000; }

@media (max-width: 991px) {
	.grafiken-1-und-2-spaltig-module .education-value { flex: 0 0 100px; }
}

@media (max-width: 767px) {
	.grafiken-1-und-2-spaltig-module .education-value { flex: 0 0 90px; }
}

/* ===============================
FOOTER / TOTAL TEXT
=============================== */
.grafiken-1-und-2-spaltig-module .chart-footer .subtext-accent--large {
	margin-top: 50px;
	font-size: 50px;
	font-weight: 600;
	color: #808080;
	text-align: center;
}

@media (max-width: 767px) {
	.grafiken-1-und-2-spaltig-module .chart-footer .subtext-accent--large {
		margin-top: 30px;
		font-size: 20px;
	}
}