/* SD Hotlap Landingpage — nur auf Seiten mit [sd_hotlap_page] geladen. */

.sd-hl-head { max-width: 736px; margin-bottom: clamp(28px, 3vw, 44px); }
.sd-hl-head h2 { margin: 0 0 9.6px; }
.sd-hl-head p { margin: 0; color: var(--sd-muted); }

/* Intro */
.sd-hl-intro { padding-block-end: 0; }
.sd-hl-lead {
	margin: 0;
	max-width: 34ch;
	font-family: var(--sd-font-display);
	font-size: clamp(21.6px, 16px + 1.4vw, 32px);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--sd-offwhite);
}

/* Simulationen: Timing-Screen-Liste */
.sd-hl-simlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 4vw, 64px);
	border-top: 1px solid var(--sd-border);
}
.sd-hl-sim {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0 16px 16px;
	border-bottom: 1px solid var(--sd-border);
	position: relative;
}
.sd-hl-sim::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17.6px;
	bottom: 17.6px;
	width: 3px;
	border-radius: 2px;
	background: var(--sd-red);
}
.sd-hl-sim--stage::before {
	background: repeating-linear-gradient(to bottom, var(--sd-red) 0 4px, transparent 4px 7px);
}
.sd-hl-sim-name {
	font-family: var(--sd-font-display);
	font-size: clamp(17.6px, 16px + .4vw, 20.8px);
	font-weight: 600;
	color: var(--sd-offwhite);
}
.sd-hl-sim-timing {
	font-family: var(--sd-font-mono);
	font-size: 12.8px;
	color: var(--sd-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Ablauf: Sektor-Leiste */
.sd-hl-sectors {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--sd-hl-count, 4), minmax(0, 1fr));
	gap: 6px;
}
.sd-hl-sector { min-width: 0; }
.sd-hl-bar {
	display: block;
	height: 8px;
	border-radius: 2px;
	background: rgba(245, 243, 239, .08);
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}
.sd-hl-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sd-offwhite);
	transform-origin: left center;
	transform: scaleX(1);
}
.sd-hl-sector--finish .sd-hl-bar::after { background: var(--sd-red); box-shadow: 0 0 18px var(--sd-red-glow); }
.sd-hl-num {
	display: block;
	font-family: var(--sd-font-mono);
	font-size: 13.6px;
	color: var(--sd-muted);
	margin-bottom: 5.6px;
}
.sd-hl-sector--finish .sd-hl-num { color: var(--sd-red); }
.sd-hl-sector h3 { margin: 0 0 6.4px; font-size: var(--sd-fs-h3, 20px); padding-right: 16px; }
.sd-hl-sector p { margin: 0; color: var(--sd-muted); padding-right: 16px; }

/* Fuell-Animation: nur wenn JS aktiv ist und Bewegung erlaubt */
@media (prefers-reduced-motion: no-preference) {
	.sd-hl-sectors.is-armed .sd-hl-bar::after {
		transform: scaleX(0);
		transition: transform .55s cubic-bezier(.4, 0, .2, 1);
		transition-delay: calc(var(--sd-hl-i, 0) * .5s);
	}
	.sd-hl-sectors.is-armed.is-on .sd-hl-bar::after { transform: scaleX(1); }
}

/* Einsatzorte */
.sd-hl-placegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(24px, 3vw, 48px);
}
.sd-hl-place { border-top: 2px solid var(--sd-offwhite); padding-top: 17.6px; }
.sd-hl-place h3 { margin: 0 0 8px; }
.sd-hl-place p { margin: 0; color: var(--sd-muted); max-width: 40ch; }

.sd-hl-cta .sd-home-lead { margin-inline: auto; max-width: 52ch; }

@media (max-width: 760px) {
	.sd-hl-simlist { grid-template-columns: 1fr; }
	.sd-hl-sectors { grid-template-columns: 1fr; gap: 28px; }
	.sd-hl-sector { display: grid; grid-template-columns: 8px 1fr; column-gap: 16px; }
	.sd-hl-bar { grid-row: 1 / span 3; height: auto; width: 8px; margin: 0; }
	.sd-hl-bar::after { transform-origin: center top; }
	.sd-hl-num, .sd-hl-sector h3, .sd-hl-sector p { grid-column: 2; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
	.sd-hl-sectors.is-armed .sd-hl-bar::after { transform: scaleY(0); }
	.sd-hl-sectors.is-armed.is-on .sd-hl-bar::after { transform: scaleY(1); }
}

/* Letzter Einsatzort (offene Liste) gestrichelt */
.sd-hl-placegrid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sd-hl-place:last-child:nth-child(n+4) { border-top-style: dashed; border-top-color: rgba(245,243,239,.5); }