/* dkg/unfallskizze – helle Draufsicht, 8 Zonen als Radio-Gruppe. Zustand nur über `input:checked ~ …`. */

.dkg-skizze {
	container: dkg-skizze / 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);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--archivo);
}

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

.dkg-skizze__auswahl {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dkg-skizze__titel {
	padding: 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 800;
	font-stretch: 76%;
	line-height: 1.1;
	letter-spacing: -.005em;
}

.dkg-skizze__intro {
	max-width: 52ch;
	margin: .375rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
}

/* Skizze, Zonen, Legende und Panels teilen sich ein Raster; Labels liegen absolut über der Skizzen-Zelle. */
.dkg-skizze__flaeche {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 42rem);
	grid-template-rows: auto auto auto;
	margin-top: var(--wp--preset--spacing--40);
}

.dkg-skizze__auto {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 460 / 290;
	overflow: visible;
}

.dkg-skizze__karosse {
	fill: var(--wp--preset--color--white);
	stroke: var(--wp--preset--color--ink);
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.dkg-skizze__glas {
	fill: var(--wp--preset--color--paper-2);
	stroke: var(--wp--preset--color--ink-2);
	stroke-width: 1.2;
}

.dkg-skizze__fein {
	fill: none;
	stroke: var(--wp--preset--color--ink-2);
	stroke-width: 1;
}

.dkg-skizze__verdeckt {
	fill: none;
	stroke: var(--wp--preset--color--ink-3);
	stroke-width: 1;
	stroke-dasharray: 4 3;
}

.dkg-skizze__achse {
	stroke: var(--wp--preset--color--ink-3);
	stroke-width: .8;
	stroke-dasharray: 14 4 2 4;
}

.dkg-skizze__marke {
	stroke: var(--wp--preset--color--navy);
	stroke-width: 1.4;
	opacity: .55;
}

.dkg-skizze__pfeil {
	display: none;
	fill: none;
	stroke: var(--wp--preset--color--navy);
	stroke-width: 3;
	stroke-linecap: round;
}

.dkg-skizze__spitze {
	fill: var(--wp--preset--color--navy);
	stroke: none;
}

.dkg-skizze__pfeil circle {
	fill: var(--wp--preset--color--mint);
	stroke: var(--wp--preset--color--ink);
	stroke-width: 1.5;
}

/* Radios: echte Eingaben, visuell versteckt; das Label ist die große Zielfläche. */
.dkg-skizze__radio {
	position: absolute;
	grid-area: 1 / 1 / 2 / 2;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.dkg-skizze__zone {
	position: absolute;
	/* Bei absolut positionierten Grid-Kindern hieße "auto" als Endlinie: bis zum Containerrand. */
	grid-area: 1 / 1 / 2 / 2;
	display: grid;
	align-items: center;
	justify-items: center;
	padding: .25rem;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius, 2px);
	cursor: pointer;
	transition: background-color 160ms var(--dkg-ease);
	-webkit-tap-highlight-color: transparent;
}

.dkg-skizze__zone span {
	max-width: 100%;
	padding: .1875rem .375rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--paper);
	font: var(--dkg-mono);
	letter-spacing: .03em;
	text-align: center;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	transition: color 160ms var(--dkg-ease), border-color 160ms var(--dkg-ease), background-color 160ms var(--dkg-ease);
}

.dkg-skizze__zone:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent);
}

.dkg-skizze__zone:hover span {
	border-color: var(--wp--custom--line-strong, currentColor);
	color: var(--wp--preset--color--ink);
}

.dkg-skizze__radio:checked + .dkg-skizze__zone {
	background: color-mix(in srgb, var(--wp--preset--color--mint) 22%, transparent);
}

.dkg-skizze__radio:checked + .dkg-skizze__zone span {
	border-color: var(--wp--preset--color--mint);
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--ink);
}

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

/* Zonenraster wie im Unfallbericht: Front links im Bild, „rechts“ ist oben. */
.dkg-skizze__zone[data-zone="front-rechts"] { left: 0; top: 0; width: 28.3%; height: 37.6%; align-items: start; justify-items: start; }
.dkg-skizze__zone[data-zone="front"] { left: 0; top: 37.6%; width: 28.3%; height: 24.8%; justify-items: start; }
.dkg-skizze__zone[data-zone="front-links"] { left: 0; top: 62.4%; width: 28.3%; height: 37.6%; align-items: end; justify-items: start; }
.dkg-skizze__zone[data-zone="seite-rechts"] { left: 28.3%; top: 0; width: 43.4%; height: 37.6%; align-items: start; }
.dkg-skizze__zone[data-zone="seite-links"] { left: 28.3%; top: 62.4%; width: 43.4%; height: 37.6%; align-items: end; }
.dkg-skizze__zone[data-zone="heck-rechts"] { left: 71.7%; top: 0; width: 28.3%; height: 37.6%; align-items: start; justify-items: end; }
.dkg-skizze__zone[data-zone="heck"] { left: 71.7%; top: 37.6%; width: 28.3%; height: 24.8%; justify-items: end; }
.dkg-skizze__zone[data-zone="heck-links"] { left: 71.7%; top: 62.4%; width: 28.3%; height: 37.6%; align-items: end; justify-items: end; }

/* Anstoß-Pfeil und Panel der gewählten Zone (Geschwister-Selektor, kein :has()) */
.dkg-skizze__radio[value="front-rechts"]:checked ~ .dkg-skizze__auto [data-zone="front-rechts"],
.dkg-skizze__radio[value="front"]:checked ~ .dkg-skizze__auto [data-zone="front"],
.dkg-skizze__radio[value="front-links"]:checked ~ .dkg-skizze__auto [data-zone="front-links"],
.dkg-skizze__radio[value="seite-rechts"]:checked ~ .dkg-skizze__auto [data-zone="seite-rechts"],
.dkg-skizze__radio[value="seite-links"]:checked ~ .dkg-skizze__auto [data-zone="seite-links"],
.dkg-skizze__radio[value="heck-rechts"]:checked ~ .dkg-skizze__auto [data-zone="heck-rechts"],
.dkg-skizze__radio[value="heck"]:checked ~ .dkg-skizze__auto [data-zone="heck"],
.dkg-skizze__radio[value="heck-links"]:checked ~ .dkg-skizze__auto [data-zone="heck-links"] {
	display: inline;
}

.dkg-skizze__panel {
	display: none;
}

.dkg-skizze__radio[value="front-rechts"]:checked ~ .dkg-skizze__panels [data-zone="front-rechts"],
.dkg-skizze__radio[value="front"]:checked ~ .dkg-skizze__panels [data-zone="front"],
.dkg-skizze__radio[value="front-links"]:checked ~ .dkg-skizze__panels [data-zone="front-links"],
.dkg-skizze__radio[value="seite-rechts"]:checked ~ .dkg-skizze__panels [data-zone="seite-rechts"],
.dkg-skizze__radio[value="seite-links"]:checked ~ .dkg-skizze__panels [data-zone="seite-links"],
.dkg-skizze__radio[value="heck-rechts"]:checked ~ .dkg-skizze__panels [data-zone="heck-rechts"],
.dkg-skizze__radio[value="heck"]:checked ~ .dkg-skizze__panels [data-zone="heck"],
.dkg-skizze__radio[value="heck-links"]:checked ~ .dkg-skizze__panels [data-zone="heck-links"] {
	display: block;
}

.dkg-skizze__legende {
	grid-area: 2 / 1;
	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);
}

.dkg-skizze__panels {
	grid-area: 3 / 1;
	margin-top: var(--wp--preset--spacing--50);
}

.dkg-skizze__panel {
	padding: 1rem 1rem 1.125rem;
	border: 1px solid var(--wp--custom--line, currentColor);
	border-top: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
}

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

.dkg-skizze__panel-titel {
	margin: .25rem 0 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 800;
	font-stretch: 76%;
	line-height: 1.05;
}

.dkg-skizze__punkte {
	display: grid;
	gap: .5rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.dkg-skizze__punkte li {
	display: grid;
	grid-template-columns: .75rem minmax(0, 1fr);
	gap: .625rem;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-2);
}

.dkg-skizze__punkte li::before {
	content: "";
	width: .75rem;
	height: .75rem;
	margin-top: .25em;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--ink-3);
	border-radius: 1px;
}

.dkg-skizze__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .625rem;
	min-height: 3rem;
	margin-top: var(--wp--preset--spacing--50);
	padding: .5rem .875rem;
	border: 1px solid var(--wp--custom--line-strong, currentColor);
	border-radius: var(--wp--custom--radius, 2px);
	color: var(--wp--preset--color--ink);
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 160ms var(--dkg-ease), background-color 160ms var(--dkg-ease);
}

.dkg-skizze__cta:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

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

.dkg-skizze__cta-icon {
	display: block;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--wp--preset--color--navy);
}

.dkg-skizze__cta-nummer {
	margin-left: auto;
	font: 500 var(--wp--preset--font-size--mono) / 1.2 var(--wp--preset--font-family--plex-mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-3);
	white-space: nowrap;
}

@container dkg-skizze (min-width: 52rem) {
	.dkg-skizze__flaeche {
		grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
		grid-template-rows: auto auto 1fr;
		column-gap: var(--wp--preset--spacing--70);
	}

	.dkg-skizze__panels {
		grid-area: 1 / 2 / 4 / 3;
		margin-top: 0;
	}

	.dkg-skizze__panel {
		padding: 1.25rem 1.375rem 1.375rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dkg-skizze__pfeil path:first-child {
		stroke-dasharray: 60;
		animation: dkg-skizze-zug 320ms var(--dkg-ease) both;
	}

	.dkg-skizze__panel {
		animation: dkg-skizze-panel 320ms var(--dkg-ease) both;
	}
}

@keyframes dkg-skizze-zug {
	from {
		stroke-dashoffset: 60;
	}
}

@keyframes dkg-skizze-panel {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}