/* Page "Leistungsumfang" (lang/de/scopeOfService.html), target image variant C1
   (docs/specs/ui-modernisierung-gestaltung.md in the komplett-refactoring project).
   Groups as panels, the four areas as tinted lanes, one sticky head panel with the legend.
   Below 992 px tabs choose the areas: two to compare on tablets, one on phones (scope.js). */

.hwa-scope {
	max-width: 61.25rem;
	margin: 0 auto;
	padding: 2.25rem 1rem 3rem;
}

.hwa-scope-kicker {
	margin: 0 0 0.375rem;
	color: var(--hwa-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hwa-scope-title {
	margin: 0;
	font-size: var(--hwa-fs-h1);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.hwa-scope-lead {
	/* as wide as the table below (User), at most 61.25rem with the page */
	margin: 0.625rem 0 1.75rem; /* air above the table (User) */
	color: var(--hwa-muted);
	font-size: var(--hwa-fs-lead);
}

/* ---------- Panels and lanes ---------- */

.hwa-scope-body {
	display: grid;
	gap: 1rem;
}

.hwa-scope-head,
.hwa-scope-panel,
.hwa-scope-close {
	background: var(--hwa-card);
	border-radius: var(--hwa-radius-lg);
	box-shadow: var(--hwa-shadow-sm);
}

.hwa-scope-head {
	position: sticky; /* sticks inside the scrolling .main (dashboard.css) */
	top: 0;
	z-index: 2;
	padding: 0.625rem 0.5rem;
}

.hwa-scope-panel {
	padding: 0.375rem 0.5rem 0.625rem;
}

.hwa-scope-panel-title {
	margin: 0.625rem 0.5rem 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.hwa-scope-table {
	width: calc(100% + 1rem);
	margin: 0 -0.5rem;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0.5rem 0; /* the gaps between the lanes */
}

.hwa-scope-cfeat {
	width: 32%;
}

.hwa-scope-feat,
.hwa-scope-legend {
	padding: 0.75rem 0.5rem;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.hwa-scope-name {
	display: block;
	font-weight: 600;
}

.hwa-scope-note {
	display: block;
	margin-top: 0.125rem;
	color: var(--hwa-muted);
	font-size: 0.8125rem;
}

.hwa-scope-lane,
.hwa-scope-lane-head {
	background: var(--hwa-lane);
	vertical-align: top; /* marks of one row on one line, notes hang below */
}

.hwa-scope-lane {
	padding: 0.75rem 0.375rem;
}

.hwa-scope-panel tbody tr:first-child .hwa-scope-lane {
	border-radius: 0.75rem 0.75rem 0 0;
}

.hwa-scope-panel tbody tr:last-child .hwa-scope-lane {
	border-radius: 0 0 0.75rem 0.75rem;
}

.hwa-scope-panel tbody tr:only-child .hwa-scope-lane {
	border-radius: 0.75rem;
}

/* Content centred as a block: a mark wider than the lane stays centred instead of
   overflowing to the right from the left padding (seen in a narrow view). */
.hwa-scope-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hwa-scope-sub {
	margin-top: 0.4375rem;
	color: var(--hwa-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.hwa-scope-none {
	color: var(--hwa-muted); /* 6:1 on the lane; the dash carries information */
	font-weight: 600;
}

/* Row highlight, only with a mouse: helps the eye across wide rows of uneven height. */
@media (hover: hover) {
	.hwa-scope-panel tbody tr:hover .hwa-scope-lane {
		background: var(--hwa-lane-hover);
		border-radius: 0.625rem;
	}

	.hwa-scope-panel tbody tr:hover .hwa-scope-feat {
		background: var(--hwa-lane-feat-hover);
		border-radius: 0.625rem;
	}
}

/* ---------- Head panel ---------- */

.hwa-scope-lane-head {
	padding: 0.75rem 0.5rem;
	border-radius: 0.75rem;
	text-align: center;
	vertical-align: middle;
	font-weight: 600;
}

.hwa-scope-area {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
}

/* Same icon box as on the start page: lime-soft, lime frame, iron-blue stroke. */
.hwa-scope-area-icon,
.hwa-scope-opt-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.625rem;
	background: var(--hwa-lime-soft);
	box-shadow: inset 0 0 0 1.5px var(--hwa-lime);
}

.hwa-scope-area-icon {
	width: 2.25rem;
	height: 2.25rem;
}

.hwa-scope-area-icon svg,
.hwa-scope-opt-icon svg,
.hwa-scope-tab svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: var(--hwa-primary);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hwa-scope-legend-grid {
	display: grid;
	grid-template-columns: max-content 1fr; /* marks as wide as the widest, texts on one line */
	gap: 0.5rem 0.625rem;
	align-items: center;
	color: var(--hwa-muted);
	font-size: 0.875rem;
}

.hwa-scope-legend-grid > div {
	display: contents;
}

.hwa-scope-legend-grid .hwa-mark {
	justify-content: center;
}

.hwa-scope-tabs,
.hwa-scope-colheads {
	display: none;
}

/* ---------- Marks ---------- */

.hwa-mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.hwa-mark-all {
	background: var(--hwa-card);
	color: var(--hwa-text);
	box-shadow: inset 0 0 0 1px var(--hwa-border-strong);
}

.hwa-mark-acc {
	background: var(--hwa-mark-acc);
	color: var(--hwa-mark-acc-ink);
	box-shadow: inset 0 0 0 1px var(--hwa-primary);
}

.hwa-mark-ad {
	background: var(--hwa-primary);
	color: var(--hwa-primary-ink);
}

.hwa-mark-misc {
	background: var(--hwa-mark-misc);
	color: var(--hwa-mark-misc-ink);
	box-shadow: inset 0 0 0 1px var(--hwa-mark-misc-line);
	font-weight: 500;
}

.hwa-planned {
	margin-left: 0.0625rem;
	color: var(--hwa-primary);
	font-weight: 700;
}

/* The asterisk hangs outside the mark, so the mark itself stays centred in its lane. */
.hwa-mark .hwa-planned {
	position: absolute;
	top: -0.125rem;
	left: 100%;
	margin-left: 0.125rem;
}

.hwa-scope-footnote {
	margin: -0.375rem 0.25rem 0;
	color: var(--hwa-muted);
	font-size: 0.875rem;
}

/* ---------- Narrow screens: two areas to compare, one on phones ----------
   Below Bootstrap's lg width the four lanes get too narrow for marks like "kostenpflichtig"
   (seen by the User), so tabs choose the areas well before phone width. */

@media (max-width: 991.98px) {
	.hwa-scope-tabs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.25rem;
		margin-bottom: 0.75rem;
		padding: 0.25rem;
		border-radius: 0.75rem;
		background: var(--hwa-bg);
	}

	.hwa-scope-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.1875rem;
		padding: 0.375rem 0.125rem;
		border-radius: 0.5625rem;
		color: var(--hwa-muted);
		font-size: 0.75rem;
		font-weight: 600;
		text-align: center;
		cursor: pointer;
	}

	.hwa-scope-tab svg {
		stroke: currentColor;
	}

	:checked + .hwa-scope-tab {
		background: var(--hwa-primary);
		color: var(--hwa-primary-ink);
	}

	:focus-visible + .hwa-scope-tab {
		outline: 2px solid var(--hwa-primary);
		outline-offset: 2px;
	}

	.hwa-scope-head-table .hwa-scope-lane-head {
		display: none;
	}

	/* tabs and legend scroll away; the compact column heads of the shown areas stay on top (User) */
	.hwa-scope-head {
		position: static;
	}

	.hwa-scope-colheads {
		display: block;
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 0.375rem 0.5rem;
		border-radius: var(--hwa-radius-lg);
		background: var(--hwa-card);
		box-shadow: var(--hwa-shadow-md);
	}

	.hwa-scope-colheads .hwa-scope-lane-head {
		padding: 0.375rem;
		font-size: 0.875rem;
	}

	.hwa-scope-colheads .hwa-scope-area {
		flex-direction: row;
		gap: 0.5rem;
	}

	.hwa-scope-colheads .hwa-scope-area-icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	.hwa-scope-legend-grid {
		grid-auto-rows: 1fr; /* equal rows: marks evenly spaced even when a text wraps */
	}

	.hwa-scope-table {
		table-layout: auto;
	}

	.hwa-scope-cfeat {
		width: 36%;
	}

	/* percentage widths keep the lanes equal and aligned across all panels */
	.hwa-scope-lane,
	.hwa-scope-lane-head {
		width: 32%;
	}

	/* show only the lanes of the ticked areas (two on tablets, one on phones; limit in scope.js) */
	.hwa-scope:not(:has(#scope-area-rent:checked)) .hwa-scope-c1,
	.hwa-scope:not(:has(#scope-area-travel:checked)) .hwa-scope-c2,
	.hwa-scope:not(:has(#scope-area-exchange:checked)) .hwa-scope-c3,
	.hwa-scope:not(:has(#scope-area-services:checked)) .hwa-scope-c4 {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.hwa-scope {
		padding: 1.25rem 0.75rem 2rem;
	}

	.hwa-scope-cfeat {
		width: 56%;
	}

	.hwa-scope-lane,
	.hwa-scope-lane-head {
		width: 44%;
	}

	.hwa-scope-head {
		padding: 0.5rem;
	}
}