/* Vergleichstabellen-Optik (Border, Hintergrund, Sticky) */

.imc-table-widget {
	width: 100%;
	max-width: 100%;
	margin: 1.25rem 0;
	color: #333;
	line-height: 1.5;
	box-sizing: border-box;
}

.imc-table-widget *,
.imc-table-widget *::before,
.imc-table-widget *::after {
	box-sizing: border-box;
}

/* Horizontaler Scroll nur im Mobile-Block (siehe unten), Desktop: kein zusätzlicher Scrollport */
.imc-table-widget__scroll-x {
	width: 100%;
}

/*
 * Kein overflow:auto hier: sonst bricht position:sticky für den Seiten-Scroll.
 */
.imc-table-widget__scroll {
	overflow: visible;
	border-radius: 8px;
	border: 1px solid #dee2e6;
	background: #fff;
}

.imc-table-widget__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background-color: #fff;
}

.imc-table-widget__head-row {
	background-color: #f8f9fa;
	border-bottom: 2px solid #dee2e6;
}

.imc-table-widget__th {
	padding: 20px;
	text-align: left;
	font-weight: bold;
	vertical-align: top;
	border-right: 1px solid #dee2e6;
	width: auto;
}

.imc-table-widget__head-row .imc-table-widget__th:last-child {
	border-right: none;
}

.imc-table-widget__td {
	padding: 15px 20px;
	vertical-align: top;
	border-right: 1px solid #dee2e6;
	width: auto;
}

.imc-table-widget__cell-inner {
	overflow-wrap: anywhere;
	word-wrap: break-word;
}

.imc-table-widget__td:last-child {
	border-right: none;
}

.imc-table-widget__body-row--bordered {
	border-bottom: 1px solid #eee;
}

.imc-table-widget__cell--col-head {
	background: #fafafa;
}

.imc-table-widget__cell--row-head {
	font-weight: 600;
	background-color: #fafafa;
}

.imc-table-widget__cell-inner > .imc-table-widget__slot + .imc-table-widget__slot {
	margin-top: 0.75rem;
}

/* Sticky Kopfzeile (relativ zum Viewport / Seiten-Scroll) */
.imc-table-widget--sticky-header .imc-table-widget__head-row .imc-table-widget__th {
	position: sticky;
	top: 0;
	z-index: 10;
	background: #fafafa;
	box-shadow: 0 1px 0 #dee2e6;
}

/* WordPress Admin-Bar (eingeloggte Nutzer im Frontend): Kopfzeile darunter einrasten */
body.admin-bar .imc-table-widget--sticky-header .imc-table-widget__head-row .imc-table-widget__th {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .imc-table-widget--sticky-header .imc-table-widget__head-row .imc-table-widget__th {
		top: 46px;
	}
}

/* Ecke: erste Spalte in der Kopfzeile horizontal kleben */
.imc-table-widget--sticky-first-col .imc-table-widget__head-row .imc-table-widget__cell--corner {
	position: sticky;
	left: 0;
	z-index: 11;
	background: #fafafa;
	box-shadow: 1px 1px 0 #dee2e6;
}

.imc-table-widget--sticky-header.imc-table-widget--sticky-first-col .imc-table-widget__head-row .imc-table-widget__cell--corner {
	top: 0;
	z-index: 12;
	box-shadow: 1px 1px 0 #dee2e6, 0 1px 0 #dee2e6;
}

body.admin-bar .imc-table-widget--sticky-header.imc-table-widget--sticky-first-col .imc-table-widget__head-row .imc-table-widget__cell--corner {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .imc-table-widget--sticky-header.imc-table-widget--sticky-first-col .imc-table-widget__head-row .imc-table-widget__cell--corner {
		top: 46px;
	}
}

/* Sticky erste Spalte (Zeilenköpfe im Body) */
.imc-table-widget--sticky-first-col .imc-table-widget__cell--row-head {
	position: sticky;
	left: 0;
	z-index: 9;
	background-color: #fafafa;
	box-shadow: 1px 0 0 #dee2e6;
}

/* -------------------------------------------------------------------------
 * Mobile (≤782px): breitere Spalten, seitlicher Scroll, Sticky (iOS/WebKit)
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 782px) {
	/*
	 * overflow-y: clip erzeugt keinen vertikalen Scroll-Container (CSS Overflow 3),
	 * sodass sticky bei Seiten-Scroll funktionieren kann; horizontal weiter scrollbar.
	 */
	.imc-table-widget__scroll-x {
		overflow-x: auto;
		overflow-y: clip;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
	}

	@supports not (overflow: clip) {
		.imc-table-widget__scroll-x {
			overflow-y: visible;
		}
	}

	/* Deutlich breiter als typische Viewports → horizontaler Scroll; gleichmäßige Spalten */
	.imc-table-widget__table {
		width: 100%;
		min-width: 44rem;
		table-layout: fixed;
	}

	.imc-table-widget__th,
	.imc-table-widget__td {
		padding: 14px 16px;
	}

	/* WebKit: ältere iOS-Versionen; zusätzliche Stacking-Kontexte für Touch */
	.imc-table-widget--sticky-header .imc-table-widget__head-row .imc-table-widget__th {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		top: max(0px, env(safe-area-inset-top, 0px));
		z-index: 20;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	body.admin-bar .imc-table-widget--sticky-header .imc-table-widget__head-row .imc-table-widget__th {
		top: calc(46px + env(safe-area-inset-top, 0px));
	}

	.imc-table-widget--sticky-first-col .imc-table-widget__head-row .imc-table-widget__cell--corner {
		position: -webkit-sticky;
		position: sticky;
		z-index: 21;
	}

	.imc-table-widget--sticky-header.imc-table-widget--sticky-first-col .imc-table-widget__head-row .imc-table-widget__cell--corner {
		top: max(0px, env(safe-area-inset-top, 0px));
		z-index: 22;
	}

	body.admin-bar .imc-table-widget--sticky-header.imc-table-widget--sticky-first-col .imc-table-widget__head-row .imc-table-widget__cell--corner {
		top: calc(46px + env(safe-area-inset-top, 0px));
	}

	.imc-table-widget--sticky-first-col .imc-table-widget__cell--row-head {
		position: -webkit-sticky;
		position: sticky;
		z-index: 19;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	/*
	 * WebKit: position:sticky in Tabellen mit horizontalem overflow bricht oft — die „Pin“-Kopie
	 * aus table-widget.js übernimmt (nur ≤782px). Optik wie die echte Kopfzeile.
	 */
	.imc-table-widget__head-pin {
		pointer-events: auto;
	}

	.imc-table-widget__head-pin-inner {
		will-change: transform;
	}

	.imc-table-widget__table--pin-head {
		margin: 0;
		border-collapse: separate;
		border-spacing: 0;
		background-color: #f8f9fa;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	}

	.imc-table-widget__table--pin-head .imc-table-widget__head-row {
		background-color: #f8f9fa;
	}

	.imc-table-widget__table--pin-head .imc-table-widget__th {
		background: #fafafa;
		border-right: 1px solid #dee2e6;
		border-bottom: 2px solid #dee2e6;
	}

	.imc-table-widget__table--pin-head .imc-table-widget__head-row .imc-table-widget__th:last-child {
		border-right: none;
	}

	/* Nur die echte Tabelle (nicht die Pin-Kopie) von Klicks ausnehmen */
	.imc-table-widget--head-pin-active .imc-table-widget__scroll .imc-table-widget__table > thead {
		pointer-events: none;
	}
}