/* ==========================================================================
   HistoryTimeline Widget — Entstehungsgeschichte (semantische <ol>-Timeline)
   Container-Query responsive, scroll-driven Progress-Linie, Print-freundlich
   ========================================================================== */

/* Typisierte Custom Property für Progress-Animation (interpolierbar).
   @property muss außerhalb von @layer stehen (global registrierter Eintrag). */
@property --kwl-ht-progress {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@layer kwl-timeline {

/* --- 1. Custom Properties --- */
.kwl-history-timeline {
	--kwl-ht-bg: var(--kwl-bg, #ffffff);
	--kwl-ht-border: var(--kwl-border, #e2e8f0);
	--kwl-ht-accent: var(--kwl-accent, #BD9B5C);
	--kwl-ht-text: var(--kwl-text, #1a202c);
	--kwl-ht-text-muted: var(--kwl-text-muted, #64748b);
	--kwl-ht-year-color: var(--kwl-accent, #BD9B5C);
	--kwl-ht-line-color: var(--kwl-ht-accent);
	--kwl-ht-line-width: 2px;
	--kwl-ht-line-x: 20px;
	--kwl-ht-marker-size: 16px;
	--kwl-ht-radius: var(--kwl-radius-lg, 12px);
	--kwl-ht-gap: var(--kwl-space-2xl, 3rem);
	--kwl-ht-dropcap-color: var(--kwl-ht-accent);
	--kwl-ht-dropcap-size: 3.2em;
}

/* --- 2. Card Bridge --- */
.kwl-history-timeline[data-kwl-card] {
	--kwl-card-bg: var(--kwl-ht-bg);
	--kwl-card-border: var(--kwl-ht-border);
	--kwl-card-accent: var(--kwl-ht-accent);
	--kwl-card-radius: var(--kwl-ht-radius);
}

.kwl-history-timeline {
	padding: var(--kwl-space-lg, 1.5rem);
	color: var(--kwl-ht-text);
}

/* Headless-Variante: ohne sichtbare Widget-Überschrift kein künstlicher Abstand. */
.kwl-history-timeline:not(:has(.kwl-history-timeline__heading)) .kwl-history-timeline__track {
	padding-top: 0;
}

/* --- 3. Heading --- */
.kwl-history-timeline .kwl-history-timeline__heading {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h1, clamp(1.75rem, 4vw, 2.5rem));
	line-height: var(--kwl-lh-heading, 1.2);
	margin: 0;
	color: var(--kwl-ht-text);
}

/* Luft zwischen Heading (inkl. Deko/Untertitel) und Timeline-Track. */
.kwl-history-timeline > .kwl-history-timeline__heading,
.kwl-history-timeline > .kwl-heading-deco,
.kwl-history-timeline > .kwl-heading-subtitle {
	margin-bottom: var(--kwl-space-md, 1rem);
}

.kwl-history-timeline > .kwl-heading-subtitle {
	margin-bottom: var(--kwl-space-xl, 2rem);
}

.kwl-history-timeline:not(:has(.kwl-heading-subtitle)) > .kwl-heading-deco {
	margin-bottom: var(--kwl-space-xl, 2rem);
}

.kwl-history-timeline:not(:has(.kwl-heading-subtitle)):not(:has(.kwl-heading-deco)) > .kwl-history-timeline__heading {
	margin-bottom: var(--kwl-space-xl, 2rem);
}

/* --- 4. Track (Container für Linie + OL) --- */
.kwl-history-timeline__track {
	position: relative;
	padding-left: calc(var(--kwl-ht-line-x) + var(--kwl-space-md, 1rem));
}

/* Statische Akzentlinie */
.kwl-history-timeline__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--kwl-ht-line-x);
	width: var(--kwl-ht-line-width);
	background: color-mix(in srgb, var(--kwl-ht-line-color) 28%, transparent);
	border-radius: 2px;
	pointer-events: none;
}

/* Scroll-driven Progress-Linie */
.kwl-history-timeline__line-progress {
	position: absolute;
	top: 0;
	left: var(--kwl-ht-line-x);
	width: var(--kwl-ht-line-width);
	height: 100%;
	background: var(--kwl-ht-line-color);
	border-radius: 2px;
	pointer-events: none;
	transform-origin: top center;
	transform: scaleY(0);
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.kwl-history-timeline__track {
			view-timeline-name: --kwl-ht-track;
			view-timeline-axis: block;
		}

		.kwl-history-timeline__line-progress {
			animation: kwl-ht-line-grow linear;
			animation-timeline: --kwl-ht-track;
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes kwl-ht-line-grow {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

/* --- 5. OL-Liste --- */
.kwl-history-timeline .kwl-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-ht-gap);
}

/* --- 6. Einzel-Eintrag --- */
.kwl-timeline__entry {
	position: relative;
	background: var(--kwl-ht-bg);
	border-radius: var(--kwl-ht-radius);
	box-shadow: var(--kwl-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
	transition: box-shadow 200ms var(--kwl-ease-default, ease);
	container-type: inline-size;
	container-name: kwl-timeline-entry;
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

/* View-Transitions: Browser gruppiert Entries beim Seiten-Wechsel (opt-in). */
@supports (view-transition-class: x) {
	.kwl-timeline__entry {
		view-transition-class: kwl-timeline-entry;
	}

	.kwl-history-timeline__era-label {
		view-transition-class: kwl-timeline-era;
	}
}

.kwl-timeline__entry[data-kwl-card] {
	--kwl-card-accent: var(--kwl-ht-accent);
}

/* Marker auf der Linie */
.kwl-timeline__marker {
	position: absolute;
	top: calc(var(--kwl-space-lg, 1.5rem) + 0.2em);
	left: calc(-1 * (var(--kwl-space-md, 1rem) + var(--kwl-ht-line-x)) + (var(--kwl-ht-line-width) / 2) - (var(--kwl-ht-marker-size) / 2));
	width: var(--kwl-ht-marker-size);
	height: var(--kwl-ht-marker-size);
	background: var(--kwl-ht-bg);
	border: 3px solid var(--kwl-ht-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--kwl-ht-accent) 12%, transparent);
	pointer-events: none;
}

.kwl-timeline__entry-inner {
	padding: var(--kwl-space-lg, 1.5rem);
}

/* --- 7. Entry-Header (Jahr + Headline) --- */
.kwl-timeline__entry-header {
	margin-bottom: var(--kwl-space-md, 1rem);
}

.kwl-timeline__year {
	display: block;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-display-sm, clamp(2.5rem, 5vw, 4rem));
	font-weight: var(--kwl-fw-semibold, 600);
	line-height: var(--kwl-lh-none, 1);
	letter-spacing: var(--kwl-ls-tight, -0.01em);
	color: var(--kwl-ht-year-color);
	font-variant-numeric: lining-nums tabular-nums;
	margin-bottom: var(--kwl-space-xs, 0.5rem);
}

.kwl-timeline__headline {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3, clamp(1.25rem, 2.5vw, 1.5rem));
	line-height: var(--kwl-lh-snug, 1.3);
	font-weight: var(--kwl-fw-semibold, 600);
	margin: 0;
	color: var(--kwl-ht-text);
}

/* --- 8. Body (Text + Medien) --- */
.kwl-timeline__body {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
}

.kwl-timeline__text {
	color: var(--kwl-ht-text);
	line-height: var(--kwl-lh-prose, 1.6);
	font-size: var(--kwl-fsize-body, 1rem);
}

.kwl-timeline__text p {
	margin: 0 0 var(--kwl-space-sm, 0.75rem);
	max-width: 75ch;
}

.kwl-timeline__text p:last-child {
	margin-bottom: 0;
}

/* Drop-Cap: Erster Buchstabe des ersten Absatzes als Initiale.
   Float als Fallback, initial-letter als Progressive Enhancement. */
.kwl-timeline__text--dropcap > p:first-of-type::first-letter {
	float: left;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-ht-dropcap-size);
	font-weight: var(--kwl-fw-bold, 700);
	line-height: var(--kwl-lh-none, 1);
	color: var(--kwl-ht-dropcap-color);
	margin-right: 0.15em;
	margin-top: 0.05em;
}

@supports (initial-letter: 3) {
	.kwl-timeline__text--dropcap > p:first-of-type::first-letter {
		initial-letter: 3;
		float: none;
		margin-top: 0;
	}
}

/* --- 9. Medien --- */
.kwl-timeline__media {
	margin: 0;
	padding: 0;
}

.kwl-timeline__image-trigger {
	display: block;
	padding: 0;
	margin: 0;
	min-inline-size: 44px;
	min-block-size: 44px;
	background: none;
	border: none;
	appearance: none;
	color: inherit;
	cursor: zoom-in;
	width: 100%;
	border-radius: var(--kwl-radius-md, 8px);
	overflow: hidden;
	transition: transform 300ms var(--kwl-ease-default, ease), box-shadow 300ms var(--kwl-ease-default, ease);
}

.kwl-timeline__image-trigger:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-timeline__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--kwl-radius-md, 8px);
}

.kwl-history-timeline .kwl-timeline__caption {
	margin: var(--kwl-space-sm, 0.75rem) 0 0;
	padding: 0;
	font-size: var(--kwl-fsize-caption, 0.875rem);
	color: var(--kwl-ht-text);
	font-style: normal;
	line-height: var(--kwl-lh-snug, 1.3);
	text-align: center;
}

@media (hover: hover) {
	.kwl-timeline__image-trigger:hover {
		transform: scale(1.02);
		box-shadow: var(--kwl-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
	}
}

/* --- 10. CTA --- */
.kwl-timeline__cta-wrap {
	margin: 0;
}

.kwl-timeline__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.5rem);
	min-height: 44px;
	padding: 0 var(--kwl-space-md, 1rem);
}

.kwl-timeline__cta-icon {
	flex-shrink: 0;
	inline-size: 16px;
	block-size: 16px;
}

/* --- 11. Entry-Hover --- */
@media (hover: hover) {
	.kwl-timeline__entry:hover {
		box-shadow: var(--kwl-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.08));
	}
}

/* --- 12. Container Query: Bild + Text nebeneinander ab 480px Card-Breite --- */
@container kwl-timeline-entry (min-width: 480px) {
	.kwl-timeline__entry .kwl-timeline__body {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--kwl-space-lg, 1.5rem);
	}

	.kwl-timeline__entry .kwl-timeline__media {
		flex: 0 0 40%;
		max-width: 40%;
	}

	.kwl-timeline__entry .kwl-timeline__text {
		flex: 1 1 60%;
		min-width: 0;
	}
}

/* --- 13. Epochen-Gruppierung --- */
.kwl-history-timeline__era {
	margin-bottom: var(--kwl-space-2xl, 3rem);
}

.kwl-history-timeline__era:last-of-type {
	margin-bottom: 0;
}

.kwl-history-timeline__era-summary {
	list-style: none;
	cursor: pointer;
	margin-bottom: var(--kwl-space-xl, 2rem);
	outline: none;
}

.kwl-history-timeline__era-summary::-webkit-details-marker {
	display: none;
}

.kwl-history-timeline__era-summary:focus-visible .kwl-history-timeline__era-label {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 4px;
	border-radius: var(--kwl-radius-sm, 4px);
}

.kwl-history-timeline__era-label {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h2, clamp(1.5rem, 3vw, 2rem));
	line-height: var(--kwl-lh-heading, 1.2);
	text-align: center;
	margin: 0;
	padding: var(--kwl-space-md, 1rem) 0;
	color: var(--kwl-ht-text);
}

/* Ausklapp-Animation via interpolate-size (Chrome 129+). Tree-weit einschalten,
   damit auch künftige auto-Keyword-Animationen im Widget davon profitieren. */
@supports (interpolate-size: allow-keywords) {
	.kwl-history-timeline {
		interpolate-size: allow-keywords;
	}

	.kwl-history-timeline__era::details-content {
		height: 0;
		overflow: clip;
		transition: height 400ms var(--kwl-ease-default, ease), content-visibility 400ms allow-discrete;
	}

	.kwl-history-timeline__era[open]::details-content {
		height: auto;
	}

	@media (prefers-reduced-motion: reduce) {
		.kwl-history-timeline__era::details-content {
			transition: none;
		}
	}
}

/* --- 14. Dark Mode --- */
@media (prefers-color-scheme: dark) {
	.kwl-history-timeline {
		--kwl-ht-bg: var(--kwl-bg, #1a202c);
		--kwl-ht-border: var(--kwl-border, #4a5568);
		--kwl-ht-text: var(--kwl-text, #f7fafc);
		--kwl-ht-text-muted: var(--kwl-text-muted, #a0aec0);
	}

	.kwl-timeline__entry {
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}

	.kwl-timeline__marker {
		box-shadow: 0 0 0 4px rgba(189, 155, 92, 0.18);
	}

	@media (hover: hover) {
		.kwl-timeline__entry:hover {
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
		}

		.kwl-timeline__image-trigger:hover {
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
		}
	}
}

/* --- 15. Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
	.kwl-timeline__entry,
	.kwl-timeline__image-trigger {
		transition: none;
	}

	.kwl-history-timeline__line-progress {
		transform: scaleY(1);
	}

	.kwl-timeline__image-trigger:hover {
		transform: none;
	}
}

/* --- 15b. Forced Colors (Windows High Contrast) --- */
@media (forced-colors: active) {
	.kwl-timeline__entry {
		border: 1px solid CanvasText;
	}

	.kwl-history-timeline__line,
	.kwl-history-timeline__line-progress {
		background: CanvasText;
	}

	.kwl-timeline__marker {
		background: Highlight;
		border-color: CanvasText;
	}

	.kwl-timeline__image-trigger:focus-visible {
		outline: 3px solid Highlight;
	}
}

/* --- 16. Editor-Placeholder --- */
.kwl-history-timeline-placeholder {
	padding: var(--kwl-space-xl, 2rem);
	border: 2px dashed var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-lg, 12px);
	text-align: center;
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 4%, transparent);
}

.kwl-history-timeline-placeholder__text {
	margin-bottom: var(--kwl-space-md, 1rem);
	color: var(--kwl-text-muted, #64748b);
}

/* --- 17. Print --- */
@media print {
	.kwl-history-timeline {
		--kwl-ht-line-width: 1px;
		box-shadow: none;
		border: none;
		padding: 0;
	}

	.kwl-history-timeline__line {
		background: #333;
	}

	.kwl-history-timeline__line-progress {
		display: none;
	}

	.kwl-timeline__entry {
		box-shadow: none;
		border: 1px solid #ccc;
		page-break-inside: avoid;
	}

	.kwl-timeline__image-trigger {
		cursor: auto;
		pointer-events: none;
	}

	.kwl-timeline__image {
		max-width: 50%;
	}

	.kwl-timeline__cta[target="_blank"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #666;
	}
}

} /* end @layer kwl-timeline */