/* dkg/schadenskala – Signature: lineare Skala + Befundblätter. Desktop Achse mit Pins, mobil Balkenliste. */

/* Container-Queries statt Viewport: Die Skala richtet sich nach der Breite, die sie bekommt (auch im Editor). */
.dkg-schadenskala {
	container: dkg-skala / inline-size;
	--dkg-ease: var(--wp--custom--ease, cubic-bezier(.2, .7, .1, 1));
	--dkg-mono: 500 var(--wp--preset--font-size--mono) / 1.3 var(--wp--preset--font-family--plex-mono);
	--dkg-schraffur: repeating-linear-gradient(135deg, var(--wp--preset--color--ink) 0 1px, transparent 1px 4px);
}

.dkg-schadenskala .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dkg-skala {
	margin: 0;
}

.dkg-skala__titel {
	font: var(--dkg-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.dkg-skala__titel b {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.dkg-skala__bereich {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dkg-skala__bereich::before {
	content: "· ";
}

/* ---------- Mobil: Balkenliste ---------- */

.dkg-skala__achse {
	display: none;
}

.dkg-skala__balken {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--ink);
}

.dkg-skala__zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: .375rem .75rem;
}

.dkg-skala__zeile-kopf {
	font: var(--dkg-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.dkg-skala__zeile-kopf b {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin-right: .375rem;
}

.dkg-skala__zeile-wert {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.25rem;
	font-weight: 760;
	font-stretch: 76%;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.dkg-skala__spur {
	grid-column: 1 / -1;
	position: relative;
	height: .625rem;
	border-left: 1px solid var(--wp--preset--color--ink);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}

.dkg-skala__fuellung {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w);
	background: var(--wp--preset--color--navy);
	transform-origin: left center;
}

.dkg-skala__zeile--bagatell .dkg-skala__fuellung {
	min-width: 3px;
	border-right: 1.5px solid var(--wp--preset--color--ink);
	background: var(--dkg-schraffur);
}

.dkg-skala__zeile--bagatell .dkg-skala__zeile-kopf {
	color: var(--wp--preset--color--ink-2);
}

/* ---------- Ab 40rem Containerbreite: lineare Achse mit Pins ---------- */

@container dkg-skala (min-width: 40rem) {
	.dkg-skala__balken {
		display: none;
	}

	.dkg-skala__achse {
		--achse: 5.75rem;
		--y: 1.75rem;
		position: relative;
		display: block;
		height: 8rem;
		/* Innenabstand für Pin-Punkt und Endtick am rechten Rand */
		margin: var(--wp--preset--spacing--50) .3125rem 0 0;
	}

	.dkg-skala__bagatell {
		position: absolute;
		top: .25rem;
		left: 0;
		width: var(--b);
		min-width: 6px;
		height: calc(var(--achse) - .25rem);
		border-right: 1.5px solid var(--wp--preset--color--ink);
		background: var(--dkg-schraffur);
	}

	.dkg-skala__bagatell-label {
		position: absolute;
		top: 0;
		left: max(var(--b), 6px);
		padding-left: 1.375rem;
		font: var(--dkg-mono);
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--wp--preset--color--ink-2);
		white-space: nowrap;
	}

	.dkg-skala__bagatell-label::before {
		content: "";
		position: absolute;
		top: .5rem;
		left: 0;
		width: 1rem;
		border-top: 1px solid var(--wp--preset--color--ink);
	}

	.dkg-skala__linie {
		position: absolute;
		top: var(--achse);
		left: 0;
		right: 0;
		border-top: 1px solid var(--wp--preset--color--ink);
	}

	.dkg-skala__tick {
		position: absolute;
		top: var(--achse);
		left: var(--x);
		height: .375rem;
		border-left: 1px solid var(--wp--custom--line-strong, currentColor);
	}

	.dkg-skala__tick--gross {
		height: .625rem;
		border-left-color: var(--wp--preset--color--ink);
	}

	.dkg-skala__tick span {
		position: absolute;
		top: .875rem;
		left: 0;
		transform: translateX(-50%);
		font: 400 var(--wp--preset--font-size--mono) / 1 var(--wp--preset--font-family--plex-mono);
		font-variant-numeric: tabular-nums;
		color: var(--wp--preset--color--ink-3);
		white-space: nowrap;
	}

	.dkg-skala__tick--start span {
		transform: none;
	}

	.dkg-skala__tick--ende span {
		transform: translateX(-100%);
	}

	.dkg-skala__pin {
		position: absolute;
		top: var(--y);
		left: var(--x);
		width: 0;
		height: calc(var(--achse) - var(--y));
	}

	.dkg-skala__pin--z1 {
		--y: 3.375rem;
	}

	.dkg-skala__pin::before {
		content: "";
		position: absolute;
		top: 1.25rem;
		bottom: 0;
		left: -.75px;
		width: 1.5px;
		background: var(--wp--preset--color--navy);
		transform-origin: bottom center;
	}

	.dkg-skala__pin::after {
		content: "";
		position: absolute;
		bottom: -4.5px;
		left: -4.5px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--wp--preset--color--navy);
	}

	.dkg-skala__pin-label {
		position: absolute;
		top: 0;
		left: 0;
		transform: translateX(-50%);
		font: var(--dkg-mono);
		letter-spacing: .04em;
		font-variant-numeric: tabular-nums;
		color: var(--wp--preset--color--navy);
		white-space: nowrap;
	}

	.dkg-skala__pin-label b {
		font-weight: 500;
	}

	.dkg-skala__pin--start .dkg-skala__pin-label {
		transform: translateX(-.25rem);
	}

	.dkg-skala__pin--ende .dkg-skala__pin-label {
		transform: translateX(calc(-100% + .25rem));
	}
}

/* Ab 56rem ist die Achse breit genug: eigene Zeilenzuordnung mit kleinerer Schwelle. */
@container dkg-skala (min-width: 56rem) {
	.dkg-skala__pin--z1 {
		--y: 1.75rem;
	}

	.dkg-skala__pin--w1 {
		--y: 3.375rem;
	}
}

/* Pins wachsen beim Hereinscrollen – nur ohne reduced-motion und nur, wo Scroll-Timelines laufen. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.dkg-skala {
			view-timeline-name: --dkg-skala;
		}

		.dkg-skala__pin::before {
			animation: dkg-skala-stiel linear both;
			animation-timeline: --dkg-skala;
			animation-range: entry 25% cover 40%;
		}

		.dkg-skala__pin::after,
		.dkg-skala__pin-label {
			animation: dkg-skala-ein linear both;
			animation-timeline: --dkg-skala;
			animation-range: entry 35% cover 42%;
		}

		.dkg-skala__fuellung {
			animation: dkg-skala-balken linear both;
			animation-timeline: --dkg-skala;
			animation-range: entry 10% cover 35%;
		}
	}
}

@keyframes dkg-skala-stiel {
	from {
		transform: scaleY(0);
	}
}

@keyframes dkg-skala-ein {
	from {
		opacity: 0;
	}
}

@keyframes dkg-skala-balken {
	from {
		transform: scaleX(0);
	}
}

/* ---------- Befundblätter: schmal Scroll-Snap mit Peek, ab 56rem Containerbreite 4er-Raster versetzt ---------- */

.dkg-schadenskala__faelle {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 84%;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--70) 0 0;
	padding: .25rem 0 var(--wp--preset--spacing--40);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

/* Randabfallend (Peek bis an den Bildschirmrand) nur, wo der Elterncontainer die Root-Abstände setzt –
   so entsteht nie horizontales Scrollen der Seite. */
.has-global-padding > .dkg-schadenskala .dkg-schadenskala__faelle {
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 0px)) calc(-1 * var(--wp--style--root--padding-right, 0px));
	padding-inline: var(--wp--style--root--padding-left, 0px) var(--wp--style--root--padding-right, 0px);
	scroll-padding-inline: var(--wp--style--root--padding-left, 0px) var(--wp--style--root--padding-right, 0px);
}

.dkg-schadenskala__faelle:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.dkg-schadenskala__faelle > * {
	margin: 0;
	scroll-snap-align: start;
}

.dkg-schadenskala__wisch {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	font: var(--dkg-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

@container dkg-skala (min-width: 40rem) {
	.dkg-schadenskala__faelle {
		grid-auto-columns: 46%;
	}
}

@container dkg-skala (min-width: 56rem) {
	.dkg-schadenskala__faelle,
	.has-global-padding > .dkg-schadenskala .dkg-schadenskala__faelle {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50);
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.dkg-schadenskala__faelle > :nth-child(even) {
		margin-top: var(--wp--preset--spacing--70);
	}

	.dkg-schadenskala__wisch {
		display: none;
	}
}