:root {
	--website-section-color: #2a2a2a;
	--website-section-h1-color: #0b3954;
	--website-section-a-color: blue;
	--website-section-a-hover-color: lightblue;
}

[data-theme="dark"] {
	--website-section-color: #e7e7dc;
	--website-section-h1-color: #ebf9f9;
	--website-section-a-color: #8ebcfe;
	--website-section-a-hover-color: lightblue;
}

.daten-title {
	text-align: center;
	margin: 0;
	font-size: calc(clamp(1.75rem, 6vw, 3rem) + var(--font-size-larger));
	color: var(--website-section-h1-color);
	padding: 0 0.5rem;
}

.daten-title svg {
	height: 26px;
	width: 26px;
	fill: #007575;
	transform: scale(1.4);
}

.website-section {
	padding: 2rem clamp(1rem, 4vw, 2rem);
	border-radius: 0.8rem;
	font-family: system-ui, sans-serif;
	color: var(--website-section-color);
	min-height: 400px;
}

.website-section h1 {
	margin-top: 3rem;
	color: var(--website-section-h1-color);
	font-size: calc(clamp(1.5rem, 6vw, 2.25rem) + var(--font-size-larger));
}

.website-section h1:nth-child(1) {
	margin-top: 0;
}

.website-section a {
	color: var(--website-section-a-color);
	transition: color 0.1s ease;
	text-decoration: none;
}

.website-section a:hover {
	color: var(--website-section-a-hover-color);
	text-decoration: underline;
}

.website-section h2 {
	font-size: calc(clamp(1.25rem, 4vw, 1.6rem) + var(--font-size-larger));
	color: var(--website-section-h1-color);
	margin: 2rem 0;
	border-left: 4px solid #52D5DB;
	padding-left: 0.6rem;
	margin-left: 0.5rem;
}

.website-section p {
	font-size: calc(clamp(0.85rem, 2.5vw, 1rem) + var(--font-size-larger));
	margin-left: 0.5rem;
}