/* =========================================================================
   UserMind Elementor Widgets – „Roter Faden"
   =========================================================================

   Positionierungsprinzip
   ----------------------
   Das SVG nutzt viewBox="0 0 100 100" mit preserveAspectRatio="none" und
   füllt den Container zu 100 % aus. Pfadkoordinate 42 liegt damit immer bei
   42 % der Containerbreite bzw. -höhe. Die Punkte werden mit exakt denselben
   Prozentwerten (--brkel-x / --brkel-y) positioniert – Linie und Icons können
   deshalb bei keiner Bildschirmgröße auseinanderlaufen.

   vector-effect: non-scaling-stroke hält die Strichstärke konstant, obwohl
   das SVG ungleichmäßig gestreckt wird.
   ========================================================================= */

.brkel-faden {
	--brkel-farbe: #e1261c;
	--brkel-staerke: 10;
	--brkel-dot: 96px;
	--brkel-icon: 38px;
	--brkel-gap: 20px;
	--brkel-vgap: 36px;
	--brkel-hoehe: 480px;
	--brkel-schatten-farbe: rgba( 0, 0, 0, 0.28 );
	--brkel-schatten-blur: 6px;
	--brkel-schatten-y: 4px;

	width: 100%;
	box-sizing: border-box;

	/* Setzt das Skript aus dem gemessenen Überstand der Textblöcke und des
	   Fadens. Dadurch beansprucht das Widget von sich aus die Höhe, die es
	   wirklich braucht – ohne Padding im umgebenden Container. */
	padding-top: var( --brkel-pad-oben, 0px );
	padding-bottom: var( --brkel-pad-unten, 0px );
}

/* Trägt das Koordinatensystem: Linie und Punkte beziehen sich auf diese Box,
   nicht auf den Wrapper. Der Faden bleibt dadurch vom Padding unberührt. */
.brkel-faden__flaeche {
	position: relative;
	height: var( --brkel-hoehe );
	width: 100%;
}

/* -------------------------------------------------------------------------
   Der Faden
   ------------------------------------------------------------------------- */

.brkel-faden__linie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var( --brkel-farbe );
	overflow: visible;
	pointer-events: none;
}

.brkel-faden__linie path {
	/* CSS gewinnt gegenüber dem Präsentationsattribut im Markup. */
	stroke-width: var( --brkel-staerke, 10 );
}

.brkel-faden--dashed .brkel-faden__linie path {
	stroke-dasharray: calc( var( --brkel-staerke ) * 2.4 ) calc( var( --brkel-staerke ) * 1.8 );
}

.brkel-faden--dotted .brkel-faden__linie path {
	stroke-dasharray: 0.01 calc( var( --brkel-staerke ) * 2 );
}

.brkel-faden--schatten .brkel-faden__linie {
	filter: drop-shadow( 0 var( --brkel-schatten-y ) var( --brkel-schatten-blur ) var( --brkel-schatten-farbe ) );
}

/* -------------------------------------------------------------------------
   Punkte
   ------------------------------------------------------------------------- */

.brkel-faden__punkte {
	position: absolute;
	inset: 0;
}

/* Nullgroßer Ankerpunkt exakt auf der Pfadkoordinate. */
.brkel-faden__punkt {
	position: absolute;
	left: var( --brkel-x, 50% );
	top: var( --brkel-y, 50% );
	width: 0;
	height: 0;
}

.brkel-faden__dot {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate( -50%, -50% );
	width: var( --brkel-dot );
	height: var( --brkel-dot );
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #0f2e52;
	color: #fff;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

a.brkel-faden__dot:hover {
	transform: translate( -50%, -50% ) scale( 1.05 );
}

.brkel-faden__dot i,
.brkel-faden__dot svg {
	font-size: var( --brkel-icon );
	width: var( --brkel-icon );
	height: var( --brkel-icon );
	line-height: 1;
	display: block;
}

.brkel-faden__dot i {
	display: flex;
	align-items: center;
	justify-content: center;
}

.brkel-faden__dot svg {
	fill: currentColor;
}

/* -------------------------------------------------------------------------
   Textblock – relativ zum Ankerpunkt
   ------------------------------------------------------------------------- */

/* Die tatsächlich genutzten Werte werden hier aus den Inline-Properties
   abgeleitet. Direkt überschreiben ginge nicht: Inline-Styles gewinnen
   immer gegenüber Stylesheet-Regeln, auch in Media-Queries. */
.brkel-faden__punkt {
	--brkel-textbreite: var( --brkel-textbreite-basis, 280px );
	--brkel-tx: var( --brkel-tx-basis, 0px );
	--brkel-ty: var( --brkel-ty-basis, 0px );
}

.brkel-faden__content {
	position: absolute;
	width: var( --brkel-textbreite );
	min-width: 0;
	text-align: var( --brkel-textalign, left );
}

.brkel-faden__punkt--unten .brkel-faden__content {
	top: calc( var( --brkel-dot ) / 2 + var( --brkel-gap ) + var( --brkel-ty, 0px ) );
	left: calc( var( --brkel-dot ) / -2 + var( --brkel-tx, 0px ) );
}

.brkel-faden__punkt--oben .brkel-faden__content {
	bottom: calc( var( --brkel-dot ) / 2 + var( --brkel-gap ) - var( --brkel-ty, 0px ) );
	left: calc( var( --brkel-dot ) / -2 + var( --brkel-tx, 0px ) );
}

.brkel-faden__punkt--rechts .brkel-faden__content {
	left: calc( var( --brkel-dot ) / 2 + var( --brkel-gap ) + var( --brkel-tx, 0px ) );
	top: calc( var( --brkel-dot ) / -2 + var( --brkel-ty, 0px ) );
}

.brkel-faden__punkt--links .brkel-faden__content {
	right: calc( var( --brkel-dot ) / 2 + var( --brkel-gap ) - var( --brkel-tx, 0px ) );
	top: calc( var( --brkel-dot ) / -2 + var( --brkel-ty, 0px ) );
	text-align: var( --brkel-textalign, right );
}

.brkel-faden__headline {
	margin: 0 0 12px;
	color: inherit;
}

.brkel-faden__headline a {
	color: inherit;
	text-decoration: none;
}

.brkel-faden__headline a:hover {
	text-decoration: underline;
}

.brkel-faden__text {
	margin: 0;
}

.brkel-faden__text p {
	margin: 0 0 0.6em;
}

.brkel-faden__text p:last-child {
	margin-bottom: 0;
}

/* Schrittzahl gibt es nur in der mobilen Timeline. */
.brkel-faden__nummer {
	display: none;
	margin-bottom: 4px;
	opacity: 0.75;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75em;
}

/* -------------------------------------------------------------------------
   Responsive Feinjustierung der Textblöcke
   (Elementor-Standardbreakpoints; die Custom-Properties setzt das Widget)
   ------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.brkel-faden__content {
		width: var( --brkel-textbreite-tablet, var( --brkel-textbreite, 280px ) );
	}

	.brkel-faden__punkt {
		--brkel-tx: var( --brkel-tx-tablet, 0px );
		--brkel-ty: var( --brkel-ty-tablet, 0px );
	}
}

@media ( max-width: 767px ) {
	.brkel-faden__content {
		width: var( --brkel-textbreite-mobil, var( --brkel-textbreite-tablet, var( --brkel-textbreite, 280px ) ) );
	}

	.brkel-faden__punkt {
		--brkel-tx: var( --brkel-tx-mobil, var( --brkel-tx-tablet, 0px ) );
		--brkel-ty: var( --brkel-ty-mobil, var( --brkel-ty-tablet, 0px ) );
	}
}

/* -------------------------------------------------------------------------
   Editor-Hinweis
   ------------------------------------------------------------------------- */

.brkel-faden__hinweis {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	color: #646970;
	font-size: 13px;
}