/* ============================================================
 * DESIGN71BASE – Link-Effekte
 * Farben/Tempo werden unter Design → Link-Effekte gesetzt und
 * als CSS-Variablen auf :root ausgegeben (includes/link-effects.php).
 *
 * Klassen (Divi-Modul → Erweitert → CSS-ID & Klassen → CSS-Klasse):
 *   dsn-underline [thin|thick|slow]  – animierter Hover-Underline
 *   dsn-fill [on-light|slow|fast]     – Text füllt sich von links nach rechts
 *   d71-link                          – Divi-Button als Textlink mit Pfeil + Füllung
 * dsn-underline und dsn-fill nicht am selben Modul kombinieren.
 * ============================================================ */

:root {
	--d71-accent: #F37021;
	--d71-link-base-dark: #1B1F24;
	--d71-link-base-light: #FFFFFF;
	--d71-link-ease: cubic-bezier(.65,.05,.36,1);
	--d71-link-speed: 0.4s;
}

/* ------------------------------------------------------------
 * 1) dsn-underline – Hover-Underline
 * ------------------------------------------------------------ */
.dsn-underline {
	--dsn-ul-color: var(--d71-accent);
	--dsn-ul-size: 2px;
	--dsn-ul-offset: 4px;
	--dsn-ul-speed: var(--d71-link-speed);
	--dsn-ul-ease: var(--d71-link-ease);
}

.dsn-underline.thin  { --dsn-ul-size: 1px; }
.dsn-underline.thick { --dsn-ul-size: 3px; }
.dsn-underline.slow  { --dsn-ul-speed: 0.6s; }

.dsn-underline a,
.dsn-underline a:visited {
	text-decoration: none !important;
	background-image: linear-gradient(var(--dsn-ul-color), var(--dsn-ul-color)) !important;
	background-repeat: no-repeat !important;
	background-position: 0 100% !important;
	background-size: 0% var(--dsn-ul-size) !important;
	padding-bottom: var(--dsn-ul-offset);
	transition: background-size var(--dsn-ul-speed) var(--dsn-ul-ease) !important;
}

@media (hover: hover) {
	.dsn-underline a:hover {
		background-size: 100% var(--dsn-ul-size) !important;
	}
}

.dsn-underline a:focus-visible {
	background-size: 100% var(--dsn-ul-size) !important;
	outline: none;
}

/* ------------------------------------------------------------
 * 2) dsn-fill – Textfüllung beim Hover
 *    Grundfarbe MUSS zur Textfarbe des Moduls passen.
 * ------------------------------------------------------------ */
.dsn-fill {
	--dsn-fill-base: var(--d71-link-base-light);
	--dsn-fill-color: var(--d71-accent);
	--dsn-fill-speed: var(--d71-link-speed);
	--dsn-fill-ease: var(--d71-link-ease);
}

.dsn-fill.on-light { --dsn-fill-base: var(--d71-link-base-dark); }
.dsn-fill.slow     { --dsn-fill-speed: 0.8s; }
.dsn-fill.fast     { --dsn-fill-speed: 0.25s; }

.dsn-fill a,
.dsn-fill a:visited {
	text-decoration: none !important;
	background-image: linear-gradient(
		to right,
		var(--dsn-fill-color) 50%,
		var(--dsn-fill-base) 50%
	) !important;
	background-size: 200% 100% !important;
	background-position: 100% 0 !important;
	background-repeat: no-repeat !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent;
	transition: background-position var(--dsn-fill-speed) var(--dsn-fill-ease) !important;
}

@media (hover: hover) {
	.dsn-fill a:hover {
		background-position: 0 0 !important;
	}
}

.dsn-fill a:focus-visible {
	background-position: 0 0 !important;
	outline: none;
}

/* ------------------------------------------------------------
 * 3) d71-link – Divi-Button als Textlink mit Pfeil + Farbfüllung
 * ------------------------------------------------------------ */
body #page-container .et_pb_button.d71-link.d71-link {
	--d71-btn-base: var(--d71-link-base-dark);
	--d71-btn-fill: var(--d71-accent);
	--d71-btn-arrow: var(--d71-accent);
	--d71-btn-speed: var(--d71-link-speed);
	--d71-btn-ease: var(--d71-link-ease);
	--d71-btn-shift: .3em;
}

body #page-container .et_pb_button.d71-link.d71-link.on-dark {
	--d71-btn-base: var(--d71-link-base-light);
}

body #page-container .et_pb_button.d71-link.d71-link,
body #page-container .et_pb_button.d71-link.d71-link:visited {
	color: var(--d71-btn-base) !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	font-weight: 600;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: color .25s ease;
}

body #page-container .et_pb_button.d71-link.d71-link:hover {
	color: var(--d71-btn-fill) !important;
}

/* Farbfüllung nur, wo background-clip: text funktioniert */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {

	body #page-container .et_pb_button.d71-link.d71-link,
	body #page-container .et_pb_button.d71-link.d71-link:visited {
		background-image: linear-gradient(
			to right,
			var(--d71-btn-fill) 50%,
			var(--d71-btn-base) 50%
		) !important;
		background-size: 200% 100% !important;
		background-position: 100% 0 !important;
		background-repeat: no-repeat !important;
		-webkit-background-clip: text !important;
		background-clip: text !important;
		-webkit-text-fill-color: transparent;
		transition: background-position var(--d71-btn-speed) var(--d71-btn-ease) !important;
	}

	@media (hover: hover) {
		body #page-container .et_pb_button.d71-link.d71-link:hover {
			background-position: 0 0 !important;
		}
	}

	body #page-container .et_pb_button.d71-link.d71-link:focus-visible {
		background-position: 0 0 !important;
		outline: none;
	}

	/* Der Pfeil erbt sonst die Transparenz und verschwindet */
	body #page-container .et_pb_button.d71-link.d71-link::after,
	body #page-container .et_pb_button.d71-link.d71-link:hover::after {
		-webkit-text-fill-color: var(--d71-btn-arrow) !important;
	}
}

/* Der Pfeil */
body #page-container .et_pb_button.d71-link.d71-link::after,
body #page-container .et_pb_button.d71-link.d71-link:hover::after {
	content: "\24" !important;
	font-family: ETmodules !important;
	font-weight: 700 !important;
	-webkit-text-stroke: .3px currentColor;
	display: inline-block !important;
	position: static !important;
	opacity: 1 !important;
	margin-left: .45em !important;
	color: var(--d71-btn-arrow) !important;
	font-size: 1em !important;
	line-height: 1 !important;
	transition: transform .25s ease;
}

body #page-container .et_pb_button.d71-link.d71-link:hover::after {
	transform: translateX(var(--d71-btn-shift));
}

/* ------------------------------------------------------------
 * Reduzierte Bewegung
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.dsn-underline a,
	.dsn-fill a,
	body #page-container .et_pb_button.d71-link.d71-link,
	body #page-container .et_pb_button.d71-link.d71-link::after {
		transition: none !important;
	}
}