/**
 * Boro Timeline for Elementor – Frontend Styles
 *
 * Layout läuft über CSS Custom Properties, die Elementor aus den
 * Widget-Controls setzt. Die Werte hier sind Fallbacks.
 */

.boro-tl {
	/* Layout (wird vom Layout-Control überschrieben) */
	--boro-tl-cols: 0px auto 1fr;
	--boro-tl-line-x: calc(var(--boro-tl-content-gap) + var(--boro-tl-marker-size) / 2);

	--boro-tl-o-content: 3;
	--boro-tl-o-aside: 1;
	--boro-tl-o-align: left;
	--boro-tl-o-align-opp: right;
	--boro-tl-o-arrow: 0%;
	--boro-tl-o-slide: 1;
	--boro-tl-o-pop-l: 0;
	--boro-tl-o-pop-r: auto;

	--boro-tl-e-content: 3;
	--boro-tl-e-aside: 1;
	--boro-tl-e-align: left;
	--boro-tl-e-align-opp: right;
	--boro-tl-e-arrow: 0%;
	--boro-tl-e-slide: 1;
	--boro-tl-e-pop-l: 0;
	--boro-tl-e-pop-r: auto;

	/* Optik */
	--boro-tl-line-width: 2px;
	--boro-tl-line-color: #e3e6ec;
	--boro-tl-line-radius: 4px;
	--boro-tl-line-offset: 0px;
	--boro-tl-line-inset: 0px;
	--boro-tl-line-dash: 8px;
	--boro-tl-line-gap: 8px;
	--boro-tl-progress-color: #2f6bff;
	--boro-tl-progress: 0%;
	--boro-tl-mask-color: #ffffff;
	--boro-tl-mask-bleed: 16px;

	/*
	 * Farben. --boro-tl-accent wird bewusst NICHT vordefiniert: die
	 * Kategoriefarbe setzt sie über Elementor, und alle Regeln unten
	 * nutzen var(--boro-tl-accent, <Fallback>).
	 */
	--boro-tl-marker-bg: #98a2b3;
	--boro-tl-group-color: #101828;
	--boro-tl-title-hover: #2f6bff;
	--boro-tl-btn-bg: #2f6bff;

	--boro-tl-content-gap: 20px;
	--boro-tl-marker-size: 34px;
	--boro-tl-marker-icon-size: 14px;
	--boro-tl-dot-size: 40%;
	--boro-tl-pulse-color: rgba(47, 107, 255, 0.35);

	--boro-tl-groupbar-width: 4px;
	--boro-tl-groupbar-gap: 10px;

	--boro-tl-ul-size: 2px;

	--boro-tl-pop-width: 340px;
	--boro-tl-pop-offset: 10px;
	--boro-tl-pop-duration: 220ms;
	--boro-tl-pop-delay: 0ms;
	--boro-tl-popbar-size: 3px;

	--boro-tl-arrow-size: 12px;
	--boro-tl-arrow-top: 28px;

	--boro-tl-anim-distance: 30px;
	--boro-tl-anim-duration: 600ms;
	--boro-tl-anim-easing: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Linie
 * ---------------------------------------------------------------------- */

.boro-tl__line {
	position: absolute;
	top: var(--boro-tl-line-inset);
	bottom: var(--boro-tl-line-inset);
	left: calc(var(--boro-tl-line-x) + var(--boro-tl-line-offset));
	width: var(--boro-tl-line-width);
	transform: translateX(-50%);
	background-color: var(--boro-tl-line-color);
	border-radius: var(--boro-tl-line-radius);
	pointer-events: none;
	z-index: 0;
}

.boro-tl__progress {
	position: absolute;
	inset: 0 0 auto 0;
	display: block;
	height: var(--boro-tl-progress);
	max-height: 100%;
	background-color: var(--boro-tl-progress-color);
	border-radius: inherit;
	transition: height 120ms linear;
}

.boro-tl-line-dashed .boro-tl__line,
.boro-tl-line-dotted .boro-tl__line {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--boro-tl-line-color) 0,
		var(--boro-tl-line-color) var(--boro-tl-line-dash),
		transparent var(--boro-tl-line-dash),
		transparent calc(var(--boro-tl-line-dash) + var(--boro-tl-line-gap))
	);
}

.boro-tl-line-dashed .boro-tl__progress,
.boro-tl-line-dotted .boro-tl__progress {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--boro-tl-progress-color) 0,
		var(--boro-tl-progress-color) var(--boro-tl-line-dash),
		transparent var(--boro-tl-line-dash),
		transparent calc(var(--boro-tl-line-dash) + var(--boro-tl-line-gap))
	);
}

.boro-tl-line-dotted .boro-tl__line,
.boro-tl-line-dotted .boro-tl__progress {
	border-radius: 999px;
}

/* -------------------------------------------------------------------------
 * Zeilen-Container
 * ---------------------------------------------------------------------- */

.boro-tl__items {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 18px;
	position: relative;
	z-index: 1;
}

/*
 * Umgekehrte Anzeige rein visuell – die DOM-Reihenfolge bleibt erhalten,
 * damit die Kategoriefarben (Geschwister-Selektoren) weiter greifen.
 */
.boro-tl-reverse-yes .boro-tl__items {
	display: flex;
	flex-direction: column-reverse;
}

/* -------------------------------------------------------------------------
 * Kategorie-Zeile
 * ---------------------------------------------------------------------- */

.boro-tl__group {
	position: relative;
	grid-column: 1 / -1;
	margin: 22px 0 6px;
	text-align: left;
	z-index: 3;
}

.boro-tl__group:first-child {
	margin-top: 0;
}

.boro-tl__group-mask {
	position: absolute;
	top: calc(var(--boro-tl-mask-bleed) * -1);
	bottom: calc(var(--boro-tl-mask-bleed) * -1);
	left: calc(var(--boro-tl-line-x) + var(--boro-tl-line-offset));
	width: calc(var(--boro-tl-line-width) + 2px);
	transform: translateX(-50%);
	background-color: var(--boro-tl-mask-color);
	pointer-events: none;
	z-index: 0;
}

.boro-tl__group-label {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--boro-tl-groupbar-gap);
	margin: 0;
	padding: 4px 14px 4px 0;
	line-height: 1.25;
	text-align: inherit;
}

.boro-tl-groupbar-yes .boro-tl__group-label::before {
	content: "";
	flex: 0 0 auto;
	align-self: stretch;
	width: var(--boro-tl-groupbar-width);
	min-height: 1em;
	border-radius: 999px;
	background-color: var(--boro-tl-accent, var(--boro-tl-group-color));
}

.boro-tl__group-label {
	color: var(--boro-tl-accent, var(--boro-tl-group-color));
}

/* -------------------------------------------------------------------------
 * Eintrags-Zeile
 * ---------------------------------------------------------------------- */

.boro-tl__item {
	--_c: var(--boro-tl-o-content);
	--_as: var(--boro-tl-o-aside);
	--_a: var(--boro-tl-o-align);
	--_ao: var(--boro-tl-o-align-opp);
	--_arrow: var(--boro-tl-o-arrow);
	--_slide: var(--boro-tl-o-slide);
	--_popl: var(--boro-tl-o-pop-l);
	--_popr: var(--boro-tl-o-pop-r);

	display: grid;
	grid-template-columns: var(--boro-tl-cols);
	column-gap: 0;
	align-items: center;
	position: relative;
	z-index: 1;
}

.boro-tl__item.is-even {
	--_c: var(--boro-tl-e-content);
	--_as: var(--boro-tl-e-aside);
	--_a: var(--boro-tl-e-align);
	--_ao: var(--boro-tl-e-align-opp);
	--_arrow: var(--boro-tl-e-arrow);
	--_slide: var(--boro-tl-e-slide);
	--_popl: var(--boro-tl-e-pop-l);
	--_popr: var(--boro-tl-e-pop-r);
}

.boro-tl__item.is-side-left {
	--_c: var(--boro-tl-o-content);
	--_as: var(--boro-tl-o-aside);
	--_a: var(--boro-tl-o-align);
	--_ao: var(--boro-tl-o-align-opp);
	--_arrow: var(--boro-tl-o-arrow);
	--_slide: var(--boro-tl-o-slide);
	--_popl: var(--boro-tl-o-pop-l);
	--_popr: var(--boro-tl-o-pop-r);
}

.boro-tl__item.is-side-right {
	--_c: var(--boro-tl-e-content);
	--_as: var(--boro-tl-e-aside);
	--_a: var(--boro-tl-e-align);
	--_ao: var(--boro-tl-e-align-opp);
	--_arrow: var(--boro-tl-e-arrow);
	--_slide: var(--boro-tl-e-slide);
	--_popl: var(--boro-tl-e-pop-l);
	--_popr: var(--boro-tl-e-pop-r);
}

.boro-tl__item:hover,
.boro-tl__item:focus-within,
.boro-tl__item.is-open {
	z-index: 40;
}

/* -------------------------------------------------------------------------
 * Marker
 * ---------------------------------------------------------------------- */

.boro-tl__marker {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--boro-tl-marker-size);
	height: var(--boro-tl-marker-size);
	margin-left: var(--boro-tl-content-gap);
	margin-right: var(--boro-tl-content-gap);
	box-sizing: border-box;
	transition: transform 300ms var(--boro-tl-anim-easing),
		background-color 300ms ease, border-color 300ms ease, color 300ms ease,
		box-shadow 300ms ease;
}

.boro-tl__marker > svg,
.boro-tl__marker i,
.boro-tl__marker .boro-tl__marker-text {
	font-size: var(--boro-tl-marker-icon-size);
	line-height: 1;
	color: inherit;
}

.boro-tl__marker > svg {
	width: var(--boro-tl-marker-icon-size);
	height: var(--boro-tl-marker-icon-size);
	fill: currentColor;
}

.boro-tl__marker .boro-tl__marker-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.boro-tl__dot {
	display: block;
	width: var(--boro-tl-dot-size);
	height: var(--boro-tl-dot-size);
	border-radius: 50%;
	background-color: currentColor;
}

/* Markerfarbe: Kategoriefarbe hat Vorrang, sonst der Farbregler */
.boro-tl__marker {
	background-color: var(--boro-tl-marker-bg);
}

.boro-tl-mk-accent-yes .boro-tl__marker {
	background-color: var(--boro-tl-accent, var(--boro-tl-marker-bg));
}

/* Puls */
.boro-tl-pulse-yes .boro-tl__marker::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 var(--boro-tl-pulse-color);
	pointer-events: none;
	opacity: 0;
}

.boro-tl-pulse-yes .boro-tl__item.is-current .boro-tl__marker::before {
	opacity: 1;
	animation: boro-tl-pulse 2s ease-out infinite;
}

@keyframes boro-tl-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--boro-tl-pulse-color);
	}
	70% {
		box-shadow: 0 0 0 18px rgba(0, 0, 0, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

/* -------------------------------------------------------------------------
 * Inhalt
 * ---------------------------------------------------------------------- */

.boro-tl__content {
	grid-column: var(--_c);
	grid-row: 1;
	min-width: 0;
	text-align: var(--_a);
}

.boro-tl__aside {
	grid-column: var(--_as);
	grid-row: 1;
	min-width: 0;
	text-align: var(--_ao);
}

/* -------------------------------------------------------------------------
 * Überschrift
 * ---------------------------------------------------------------------- */

.boro-tl__plain {
	position: relative;
	display: inline-block;
	max-width: 100%;
	text-align: var(--_a);
}

.boro-tl__title {
	margin: 0;
	line-height: 1.35;
	transition: color 250ms ease;
	outline: none;
}

.boro-tl__title[tabindex] {
	cursor: pointer;
}

.boro-tl__title-text {
	position: relative;
	display: inline-block;
}

.boro-tl__title:focus-visible .boro-tl__title-text {
	outline: 2px solid var(--boro-tl-accent, currentColor);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Hover-Farbe der Überschrift */
.boro-tl .boro-tl__items .boro-tl__item:hover .boro-tl__title,
.boro-tl .boro-tl__items .boro-tl__item:focus-within .boro-tl__title,
.boro-tl .boro-tl__items .boro-tl__item.is-open .boro-tl__title {
	color: var(--boro-tl-title-hover);
}

.boro-tl-th-accent-yes .boro-tl .boro-tl__items .boro-tl__item:hover .boro-tl__title,
.boro-tl-th-accent-yes .boro-tl .boro-tl__items .boro-tl__item:focus-within .boro-tl__title,
.boro-tl-th-accent-yes .boro-tl .boro-tl__items .boro-tl__item.is-open .boro-tl__title {
	color: var(--boro-tl-accent, var(--boro-tl-title-hover));
}

/* Unterstrich */
.boro-tl-ul-grow .boro-tl__title-text::after,
.boro-tl-ul-permanent .boro-tl__title-text::after {
	content: "";
	position: absolute;
	bottom: -0.15em;
	height: var(--boro-tl-ul-size);
	border-radius: 999px;
	background-color: var(--boro-tl-accent, var(--boro-tl-title-hover));
	transition: left 260ms var(--boro-tl-anim-easing),
		right 260ms var(--boro-tl-anim-easing);
}

.boro-tl-ul-grow .boro-tl__title-text::after {
	left: 50%;
	right: 50%;
}

.boro-tl-ul-permanent .boro-tl__title-text::after {
	left: 0;
	right: 0;
}

.boro-tl-ul-grow .boro-tl__item:hover .boro-tl__title-text::after,
.boro-tl-ul-grow .boro-tl__item:focus-within .boro-tl__title-text::after,
.boro-tl-ul-grow .boro-tl__item.is-open .boro-tl__title-text::after {
	left: 0;
	right: 0;
}

/* -------------------------------------------------------------------------
 * Hover-Box
 * ---------------------------------------------------------------------- */

.boro-tl__pop {
	position: absolute;
	left: var(--_popl);
	right: var(--_popr);
	z-index: 50;
	width: max-content;
	max-width: min(var(--boro-tl-pop-width), 88vw);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--boro-tl-pop-duration) ease,
		transform var(--boro-tl-pop-duration) var(--boro-tl-anim-easing),
		visibility 0s linear var(--boro-tl-pop-duration);
}

.boro-tl-popat-below .boro-tl__pop {
	top: calc(100% + var(--boro-tl-pop-offset));
}

.boro-tl-popat-above .boro-tl__pop {
	bottom: calc(100% + var(--boro-tl-pop-offset));
}

.boro-tl-pop-slide.boro-tl-popat-below .boro-tl__pop {
	transform: translateY(8px);
}

.boro-tl-pop-slide.boro-tl-popat-above .boro-tl__pop {
	transform: translateY(-8px);
}

.boro-tl-pop-zoom .boro-tl__pop {
	transform: scale(0.94);
	transform-origin: top center;
}

.boro-tl__pop-inner {
	background-color: #fff;
	border-radius: 10px;
	padding: 16px 18px;
	line-height: 1.6;
	text-align: left;
}

.boro-tl__pop-inner > *:last-child {
	margin-bottom: 0;
}

.boro-tl__pop-inner > *:first-child {
	margin-top: 0;
}

/* Sichtbar machen */
.boro-tl-trigger-title .boro-tl__plain:hover .boro-tl__pop,
.boro-tl-trigger-title .boro-tl__plain:focus-within .boro-tl__pop,
.boro-tl-trigger-row .boro-tl__item:hover .boro-tl__pop,
.boro-tl-trigger-row .boro-tl__item:focus-within .boro-tl__pop,
.boro-tl__item.is-open .boro-tl__pop {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition-delay: var(--boro-tl-pop-delay), var(--boro-tl-pop-delay), 0s;
}

/* Kategoriefarbe als Balken an der Box */
.boro-tl-popbar-top .boro-tl .boro-tl__items .boro-tl__pop-inner {
	border-top: var(--boro-tl-popbar-size) solid
		var(--boro-tl-accent, var(--boro-tl-title-hover));
}

.boro-tl-popbar-start .boro-tl .boro-tl__items .boro-tl__pop-inner {
	border-left: var(--boro-tl-popbar-size) solid
		var(--boro-tl-accent, var(--boro-tl-title-hover));
}

/* -------------------------------------------------------------------------
 * Card-Modus
 * ---------------------------------------------------------------------- */

.boro-tl__card {
	position: relative;
	z-index: 0;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: var(--_a);
	transition: transform 300ms var(--boro-tl-anim-easing),
		background-color 300ms ease, border-color 300ms ease,
		box-shadow 300ms ease;
}

.boro-tl-arrow-yes .boro-tl__card::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--boro-tl-arrow-top);
	left: var(--_arrow);
	width: var(--boro-tl-arrow-size);
	height: var(--boro-tl-arrow-size);
	background-color: inherit;
	background-image: inherit;
	border: inherit;
	border-radius: 2px;
	transform: translate(-50%, -50%) rotate(45deg);
	pointer-events: none;
}

.boro-tl__desc {
	margin: 6px 0 0;
}

.boro-tl__desc > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Datum & Button
 * ---------------------------------------------------------------------- */

.boro-tl__date {
	display: inline-block;
	line-height: 1.3;
}

.boro-tl__button {
	display: inline-block;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: color 250ms ease, background-color 250ms ease,
		border-color 250ms ease, box-shadow 250ms ease;
}

.boro-tl__button:hover,
.boro-tl__button:focus {
	text-decoration: none;
}

.boro-tl__button {
	background-color: var(--boro-tl-btn-bg);
}

.boro-tl-btn-accent-yes .boro-tl__button {
	background-color: var(--boro-tl-accent, var(--boro-tl-btn-bg));
}

/* -------------------------------------------------------------------------
 * Scroll-Animationen
 * ---------------------------------------------------------------------- */

.boro-tl.is-animated .boro-tl__item,
.boro-tl.is-animated .boro-tl__group {
	opacity: 0;
	transition: opacity var(--boro-tl-anim-duration) var(--boro-tl-anim-easing),
		transform var(--boro-tl-anim-duration) var(--boro-tl-anim-easing);
}

.boro-tl.is-animated .boro-tl__item.is-visible,
.boro-tl.is-animated .boro-tl__group.is-visible {
	opacity: 1;
	transform: none;
}

.boro-tl-anim-slide .boro-tl.is-animated .boro-tl__item {
	transform: translateX(calc(var(--boro-tl-anim-distance) * var(--_slide)));
}

.boro-tl-anim-slide .boro-tl.is-animated .boro-tl__group,
.boro-tl-anim-up .boro-tl.is-animated .boro-tl__item,
.boro-tl-anim-up .boro-tl.is-animated .boro-tl__group {
	transform: translateY(var(--boro-tl-anim-distance));
}

.boro-tl-anim-zoom .boro-tl.is-animated .boro-tl__item,
.boro-tl-anim-zoom .boro-tl.is-animated .boro-tl__group {
	transform: scale(0.94);
}

.boro-tl-anim-fade .boro-tl.is-animated .boro-tl__item,
.boro-tl-anim-fade .boro-tl.is-animated .boro-tl__group {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.boro-tl.is-animated .boro-tl__item,
	.boro-tl.is-animated .boro-tl__group {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.boro-tl__progress,
	.boro-tl__pop {
		transition: none;
	}

	.boro-tl-pulse-yes .boro-tl__item.is-current .boro-tl__marker::before {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Elementor-Editor
 * ---------------------------------------------------------------------- */

.elementor-editor-active .boro-tl.is-animated .boro-tl__item,
.elementor-editor-active .boro-tl.is-animated .boro-tl__group,
.elementor-editor-preview .boro-tl.is-animated .boro-tl__item,
.elementor-editor-preview .boro-tl.is-animated .boro-tl__group {
	opacity: 1;
	transform: none;
}