/* Page-specific styles for unterauftragsverarbeiter.html
   Purpose: legal content layout + responsive sub-processor table,
   including dark-mode overrides. Based on datenschutz.css. */

@media only screen and (min-width: 0rem) {
	/* Keep container centered but constrain line length for readability */
	#legal-content .container {
		max-width: 72ch;
		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 p.lead {
		margin-bottom: 1.5rem;
	}
	#legal-content ul {
		padding-left: 1.25rem;
		margin-bottom: 0.75rem;
	}

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

	/* ------------------------------------------ */
	/*   Sub-processor table                      */
	/* ------------------------------------------ */

	/* Widen container so the 6-column table fits comfortably on desktop.
	   Text sections remain readable since the table itself controls the width. */
	#legal-content .container {
		max-width: 60rem;
	}

	.sp-table-wrapper {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 1.5rem 0 2rem 0;
	}

	.sp-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.875rem;
		line-height: 1.45;
		table-layout: fixed;
	}

	.sp-table thead {
		background-color: var(--primary);
	}

	.sp-table th {
		color: #fff;
		font-weight: 700;
		text-align: left;
		padding: 0.75rem 0.625rem;
		vertical-align: top;
		word-wrap: break-word;
		hyphens: auto;
	}

	/* Column width allocation (sum = 100%) */
	.sp-table th:nth-child(1), .sp-table td:nth-child(1) { width: 18%; } /* Dienstleister */
	.sp-table th:nth-child(2), .sp-table td:nth-child(2) { width: 13%; } /* Firmensitz */
	.sp-table th:nth-child(3), .sp-table td:nth-child(3) { width: 14%; } /* Serverstandort */
	.sp-table th:nth-child(4), .sp-table td:nth-child(4) { width: 26%; } /* Leistung */
	.sp-table th:nth-child(5), .sp-table td:nth-child(5) { width: 11%; } /* Gesundheitsdaten */
	.sp-table th:nth-child(6), .sp-table td:nth-child(6) { width: 18%; } /* Zertifikate */

	.sp-table td {
		padding: 0.75rem 0.625rem;
		color: var(--bodyTextColor);
		border-bottom: 1px solid #e5e5e5;
		vertical-align: top;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.sp-table tbody tr:nth-child(even) {
		background-color: #f7f7f7;
	}

	.sp-table tbody tr:hover {
		background-color: #eef2f9;
	}

	.sp-table .sp-name {
		font-weight: 700;
		color: var(--headerColor);
	}

	.sp-table .sp-no {
		font-weight: 700;
		color: #1a7f37;
		white-space: nowrap;
	}

	.sp-table .sp-na {
		color: #9a9a9a;
		text-align: center;
	}

	/* On small screens, allow horizontal scroll since 6 columns won't fit */
	@media only screen and (max-width: 48rem) {
		.sp-table {
			table-layout: auto;
			font-size: 0.8125rem;
		}
		.sp-table th,
		.sp-table td {
			white-space: nowrap;
			padding: 0.625rem 0.5rem;
		}
	}

	/* 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);
	}

	body.dark-mode .sp-table thead {
		background-color: var(--medium);
	}
	body.dark-mode .sp-table th {
		color: var(--bodyTextColorWhite);
	}
	body.dark-mode .sp-table td {
		color: var(--bodyTextColorWhite);
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
	body.dark-mode .sp-table .sp-name {
		color: var(--bodyTextColorWhite);
	}
	body.dark-mode .sp-table .sp-no {
		color: #4ade80;
	}
	body.dark-mode .sp-table .sp-na {
		color: #6b7280;
	}
	body.dark-mode .sp-table tbody tr:nth-child(even) {
		background-color: rgba(255, 255, 255, 0.04);
	}
	body.dark-mode .sp-table tbody tr:hover {
		background-color: rgba(255, 255, 255, 0.08);
	}
}

/* End of unterauftragsverarbeiter.css */