/* Page-specific styles for datenschutz.html
	 Purpose: improve readability of legal content (line-length, spacing,
	 headings, lists) and provide dark-mode overrides. */

@media only screen and (min-width: 0rem) {
	/* Keep container centered but constrain line length for readability */
	#legal-content .container {
		max-width: 72ch; /* comfortable reading width (~72 characters) */
		width: 92%;
		margin: 0 auto;
		padding: calc(var(--sectionPadding) / 2) 1rem;
		box-sizing: border-box;
	}

	/* Wrapper spacing */
	#legal-content .content-wrapper {
		display: block;
		gap: 1.25rem;
	}

	/* Titles and meta */
	.legal-title {
		font-size: clamp(1.5rem, 3.5vw, 2rem);
		font-weight: 900;
		margin-bottom: 0.25rem;
		color: var(--headerColor);
	}
	.legal-date {
		font-size: 0.9rem;
		color: #7D799C;
		margin-bottom: 1rem;
	}

	/* Section headings inside legal content */
	#legal-content h2 {
		font-size: clamp(1.125rem, 2.2vw, 1.25rem);
		margin-top: 1.25rem;
		margin-bottom: 0.5rem;
		color: var(--headerColor);
	}
	#legal-content h3 {
		font-size: 1rem;
		margin-top: 0.75rem;
		margin-bottom: 0.375rem;
		color: var(--headerColor);
	}

	/* Text and lists */
	#legal-content p,
	#legal-content li {
		font-size: 1rem;
		line-height: 1.6;
		color: var(--bodyTextColor);
		margin-bottom: 0.75rem;
	}
	#legal-content ul {
		padding-left: 1.25rem;
		margin-bottom: 0.75rem;
	}

	/* Address/contact styling */
	address.contact-info {
		font-style: normal;
		color: var(--bodyTextColor);
		margin-bottom: 0.75rem;
	}
	address.contact-info h3 {
		margin-bottom: 0.25rem;
		font-weight: 700;
	}

	/* Links more visible */
	#legal-content a {
		color: var(--primary);
		text-decoration: underline;
	}

	/* Small screens: slightly larger container width and padding adjustments */
	@media only screen and (max-width: 36rem) {
		#legal-content .container {
			width: 96%;
			padding: 1rem;
		}
		.legal-title { font-size: 1.5rem; }
	}
}

/* Dark mode overrides */
@media only screen and (min-width: 0rem) {
	body.dark-mode #legal-content p,
	body.dark-mode #legal-content li,
	body.dark-mode #legal-content h2,
	body.dark-mode #legal-content h3,
	body.dark-mode .legal-title,
	body.dark-mode .legal-date {
		color: var(--bodyTextColorWhite);
	}
	body.dark-mode #legal-content a {
		color: var(--secondaryLight);
	}
}

/* End of datenschutz.css */