/* LinkedIn Feed – Entwickelt von Matthias Biela, urform – https://www.urform.de – info@urform.de */
/*
 * LinkedIn Feed – Darstellung
 *
 * Alle Werte kommen als CSS-Variablen und Daten-Attribute aus „LinkedIn Feed → Darstellung“.
 * Leere Farbfelder setzen keine Variable – dann greift der Fallback (Akzentfarbe bzw. Theme).
 *
 * Spalten richten sich nach der Breite des Feeds: über 760 px Desktop, bis 760 px Tablet,
 * bis 480 px Handy. Die Breite misst linkedin-feed.js (data-size="d|t|m"); ohne JavaScript
 * greifen ersatzweise die Bildschirmbreiten 1024 px / 640 px.
 * Bewusst KEINE CSS Container Queries: deren Größen-Eindämmung lässt den Feed in
 * Flexbox-Containern (z. B. Elementor) auf 0 px Breite schrumpfen.
 */

.uflf {
	--uflf-cols-d: 3;
	--uflf-cols-t: 2;
	--uflf-cols-m: 1;
	--uflf-view-d: 3;
	--uflf-view-t: 2;
	--uflf-view-m: 1;
	--uflf-gap: 24px;
	--uflf-list-img: 36%;

	--uflf-bg: #fff;
	--uflf-border: #e2e2e2;
	--uflf-border-w: 1px;
	--uflf-radius: 8px;
	--uflf-padding: 20px;
	--uflf-shadow: none;
	--uflf-shadow-h: 0 14px 34px rgba(0, 0, 0, .14);
	--uflf-anim: 250ms;

	--uflf-ratio: 16/10;
	--uflf-img-fit: cover;
	--uflf-img-pos: 50% 50%;
	--uflf-overlay: #000;
	--uflf-overlay-o: 0;
	--uflf-overlay-oh: 0;

	--uflf-font: inherit;
	--uflf-size: 16px;
	--uflf-line-height: 1.55;
	--uflf-text-weight: 400;
	--uflf-text: inherit;
	--uflf-align: left;
	--uflf-lines: 0;

	--uflf-muted: #6b6b6b;
	--uflf-date-size: 13px;
	--uflf-date-weight: 400;
	--uflf-date-case: none;

	--uflf-accent: #0a66c2;
	--uflf-btn-text: #fff;
	--uflf-btn-size: 15px;
	--uflf-btn-weight: 600;
	--uflf-btn-case: none;
	--uflf-btn-letter: 0px;
	--uflf-btn-py: 10px;
	--uflf-btn-px: 18px;
	--uflf-btn-radius: 6px;
	--uflf-btn-bw: 2px;
	--uflf-btn-anim: 250ms;
	--uflf-btn-ease: ease;

	--uflf-nav-size: 42px;
	--uflf-nav-radius: 50%;
	--uflf-nav-icon-size: 40;
	--uflf-nav-bw: 0px;
	--uflf-nav-shadow: none;
	--uflf-nav-offset: 10px;
	--uflf-dot-size: 9px;

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	font-family: var(--uflf-font);
	font-size: var(--uflf-size);
	line-height: var(--uflf-line-height);
	color: var(--uflf-text);
}

.uflf *,
.uflf *::before,
.uflf *::after { box-sizing: border-box; }

/* ---------- Spalten je Breite ---------- */

.uflf-track {
	--uflf-cols: var(--uflf-cols-d);
	--uflf-view: var(--uflf-view-d);
	gap: var(--uflf-gap);
}
@media (max-width: 1024px) {
	.uflf:not([data-size]) .uflf-track { --uflf-cols: var(--uflf-cols-t); --uflf-view: var(--uflf-view-t); }
}
@media (max-width: 640px) {
	.uflf:not([data-size]) .uflf-track { --uflf-cols: var(--uflf-cols-m); --uflf-view: var(--uflf-view-m); }
}
.uflf[data-size="t"] .uflf-track { --uflf-cols: var(--uflf-cols-t); --uflf-view: var(--uflf-view-t); }
.uflf[data-size="m"] .uflf-track { --uflf-cols: var(--uflf-cols-m); --uflf-view: var(--uflf-view-m); }

/* ---------- Karte ---------- */

.uflf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--uflf-bg);
	border: var(--uflf-border-w) solid var(--uflf-border);
	border-radius: var(--uflf-radius);
	box-shadow: var(--uflf-shadow);
	overflow: hidden;
	color: inherit;
	transition: transform var(--uflf-anim) ease, box-shadow var(--uflf-anim) ease, border-color var(--uflf-anim) ease, background-color var(--uflf-anim) ease;
}
.uflf .uflf-card:hover {
	background: var(--uflf-bg-h, var(--uflf-bg));
	border-color: var(--uflf-border-h, var(--uflf-border));
}
.uflf[data-card-hover="lift"] .uflf-card:hover { transform: translateY(-4px); box-shadow: var(--uflf-shadow-h); }
.uflf[data-card-hover="shadow"] .uflf-card:hover { box-shadow: var(--uflf-shadow-h); }
.uflf[data-card-hover="scale"] .uflf-card:hover { transform: scale(1.02); }
.uflf[data-card-hover="border"] .uflf-card:hover { border-color: var(--uflf-border-h, var(--uflf-accent)); }

/* Ganze Karte klickbar: der LinkedIn-Link wird über die Karte gespannt, Links im Text bleiben klickbar. */
.uflf[data-card-link="1"] .uflf-text a,
.uflf[data-card-link="1"] .uflf-article { position: relative; z-index: 4; }
.uflf[data-card-link="1"][data-button="0"][data-btn] .uflf-card .uflf-more { position: static; display: block; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* ---------- Bild ---------- */

.uflf .uflf-media {
	position: relative;
	display: block;
	aspect-ratio: var(--uflf-ratio);
	overflow: hidden;
	background: var(--uflf-img-bg, rgba(0, 0, 0, .05));
}
.uflf-media img,
.uflf-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--uflf-img-fit);
	object-position: var(--uflf-img-pos);
	transition: transform calc(var(--uflf-anim) * 1.6) ease, filter var(--uflf-anim) ease;
}
.uflf-placeholder { min-height: 120px; }
.uflf-media picture { display: block; width: 100%; height: 100%; }
.uflf .uflf-media.has-gif::after { display: none; }                 /* GIF läuft – Play-Symbol nur auf Wunsch */
.uflf[data-gif-icon="1"] .uflf-media.has-gif.is-video::after { display: block; }
.uflf[data-ratio="auto"] .uflf-media { aspect-ratio: auto; }
.uflf[data-ratio="auto"] .uflf-media img { height: auto; }

.uflf-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--uflf-overlay);
	opacity: var(--uflf-overlay-o);
	transition: opacity var(--uflf-anim) ease;
	pointer-events: none;
}
.uflf-card:hover .uflf-media::before { opacity: var(--uflf-overlay-oh); }

.uflf[data-img-hover="zoom"] .uflf-card:hover .uflf-media img { transform: scale(1.05); }
.uflf[data-img-hover="grayscale"] .uflf-media img { filter: grayscale(1); }
.uflf[data-img-hover="grayscale"] .uflf-card:hover .uflf-media img { filter: grayscale(0); }
.uflf[data-img-hover="darken"] .uflf-card:hover .uflf-media img { filter: brightness(.75); }
.uflf[data-img-hover="brighten"] .uflf-card:hover .uflf-media img { filter: brightness(1.12); }

.uflf-media.is-video::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: 2;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
}

/* ---------- Text ---------- */

.uflf-body {
	display: flex;
	flex-direction: column;
	gap: .65em;
	flex: 1;
	padding: var(--uflf-padding);
	text-align: var(--uflf-align);
}

.uflf-date {
	order: 1;
	font-size: var(--uflf-date-size);
	font-weight: var(--uflf-date-weight);
	text-transform: var(--uflf-date-case);
	color: var(--uflf-muted);
}
.uflf[data-date-pos="bottom"] .uflf-date { order: 4; }

.uflf-text {
	order: 2;
	margin: 0;
	font-weight: var(--uflf-text-weight);
	overflow-wrap: anywhere;
}
.uflf .uflf-text a { color: var(--uflf-link, var(--uflf-accent)); text-decoration: none; transition: color var(--uflf-anim) ease; }
.uflf .uflf-text a:hover { color: var(--uflf-link-h, var(--uflf-link, var(--uflf-accent))); text-decoration: underline; }

.uflf[data-clamp]:not([data-clamp="0"]) .uflf-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--uflf-lines);
	line-clamp: var(--uflf-lines);
	overflow: hidden;
}

.uflf .uflf-article {
	order: 3;
	display: block;
	padding: .6em .75em;
	border-left: 3px solid var(--uflf-art-line, var(--uflf-accent));
	background: var(--uflf-art-bg, rgba(0, 0, 0, .03));
	color: var(--uflf-art-text, inherit);
	font-weight: 600;
	text-align: left;
	text-decoration: none;
}

/* ---------- Button / Link ----------
 * Mit „.uflf“ davor, damit Theme-Regeln wie „:root :where(a)“ (theme.json) oder Elementor-Linkfarben nicht gewinnen.
 * Hintergründe nur als background-color – background-image ist für die Animationen reserviert. */

.uflf .uflf-card .uflf-more {
	order: 5;
	align-self: flex-start;
	margin-top: auto;
	font-size: var(--uflf-btn-size);
	font-weight: var(--uflf-btn-weight);
	text-transform: var(--uflf-btn-case);
	letter-spacing: var(--uflf-btn-letter);
	line-height: 1.25;
	text-decoration: none;
	background-repeat: no-repeat;
	transition-property: color, background-color, background-size, background-position, border-color, transform, box-shadow, filter;
	transition-duration: var(--uflf-btn-anim);
	transition-timing-function: var(--uflf-btn-ease);
}

/* ---------- Theme-/Elementor-Effekte am Link abschalten ----------
 * Viele Themes gestalten jeden Link mit eigener Unterstreichung, Linien-Animation (::before/::after)
 * oder Hintergrundbild. Bei „Textlink“, „Button“ und „Button mit Rahmen“ gestaltet nur das Plugin –
 * bei „Nur eigene Klassen“ bleibt alles dem Theme überlassen.
 * :where() hält die Spezifität niedrig, damit die Plugin-Effekte (Linie, Füllung, Glanz) weiter greifen. */
.uflf:where(:not([data-btn="theme"])) .uflf-card a.uflf-more {
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	border-image: none;
}
.uflf[data-btn="link"] .uflf-card a.uflf-more { padding: 0; border: 0; border-radius: 0; background-color: transparent; }
.uflf:where(:not([data-btn="theme"])) .uflf-card a.uflf-more::before,
.uflf:where(:not([data-btn="theme"])) .uflf-card a.uflf-more::after {
	position: static;
	inset: auto;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	filter: none;
	clip-path: none;
	-webkit-mask: none;
	mask: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	vertical-align: baseline;
	animation: none;
	transition: none;
}
.uflf:not([data-btn="theme"]):not([data-card-link="1"]) .uflf-card a.uflf-more::before,
.uflf[data-arrow="0"]:not([data-btn="theme"]) .uflf-card a.uflf-more::after { content: none; display: none; }

/* Pfeil hinter dem Text (nicht bei „Nur eigene Klassen“ – dort gehört ::after dem Theme) */
.uflf[data-arrow="1"]:not([data-btn="theme"]) .uflf-card a.uflf-more::after {
	content: "\00a0→";
	display: inline-block;
	transition: transform var(--uflf-btn-anim) var(--uflf-btn-ease);
}

/* Ganze Karte klickbar: unsichtbare Fläche über der Karte */
.uflf[data-card-link="1"] .uflf-more::before,
.uflf[data-card-link="1"]:not([data-btn="theme"]) .uflf-card a.uflf-more::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 3;
	background: transparent;
}

.uflf[data-btn-align="center"] .uflf-more { align-self: center; }
.uflf[data-btn-align="right"] .uflf-more { align-self: flex-end; }
.uflf[data-btn-align="full"] .uflf-more { align-self: stretch; text-align: center; }

/* Textlink */
.uflf[data-btn="link"] .uflf-card .uflf-more,
.uflf[data-btn="link"] .uflf-card .uflf-more:visited { color: var(--uflf-more, var(--uflf-accent)); }
.uflf[data-btn="link"] .uflf-card .uflf-more:hover,
.uflf[data-btn="link"] .uflf-card .uflf-more:focus-visible { color: var(--uflf-more-h, var(--uflf-more, var(--uflf-accent))); }

/* Button gefüllt bzw. mit Rahmen */
.uflf[data-btn="button"] .uflf-card .uflf-more,
.uflf[data-btn="outline"] .uflf-card .uflf-more {
	padding: var(--uflf-btn-py) var(--uflf-btn-px);
	border: var(--uflf-btn-bw) solid var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent)));
	border-radius: var(--uflf-btn-radius);
}
.uflf[data-btn="button"] .uflf-card .uflf-more,
.uflf[data-btn="button"] .uflf-card .uflf-more:visited {
	background-color: var(--uflf-btn-bg, var(--uflf-accent));
	color: var(--uflf-btn-text);
}
.uflf[data-btn="button"] .uflf-card .uflf-more:hover,
.uflf[data-btn="button"] .uflf-card .uflf-more:focus-visible {
	background-color: var(--uflf-btn-bg-h, var(--uflf-btn-bg, var(--uflf-accent)));
	color: var(--uflf-btn-text-h, var(--uflf-btn-text));
	border-color: var(--uflf-btn-border-h, var(--uflf-btn-bg-h, var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent)))));
}
/* Ohne eigene Hover-Farbe: leicht aufhellen, damit der Button reagiert */
.uflf[data-btn="button"]:not([style*="--uflf-btn-bg-h"]) .uflf-card .uflf-more:hover { filter: brightness(1.08); }

.uflf[data-btn="outline"] .uflf-card .uflf-more,
.uflf[data-btn="outline"] .uflf-card .uflf-more:visited {
	background-color: transparent;
	color: var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent)));
}
.uflf[data-btn="outline"] .uflf-card .uflf-more:hover,
.uflf[data-btn="outline"] .uflf-card .uflf-more:focus-visible {
	background-color: var(--uflf-btn-bg-h, var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent))));
	color: var(--uflf-btn-text-h, var(--uflf-btn-text));
	border-color: var(--uflf-btn-border-h, var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent))));
}

/* „Nur eigene Klassen“: keine Plugin-Stile außer Position – Theme/Elementor übernimmt */
.uflf[data-btn="theme"] .uflf-card .uflf-more { font-size: revert; font-weight: revert; text-transform: revert; letter-spacing: revert; line-height: revert; }

/* ---------- Button-Animation bei Hover ----------
 * Dauer und Verlauf: --uflf-btn-anim / --uflf-btn-ease (gelten auch für die Slider-Pfeile). */
.uflf { --uflf-btn-fill: var(--uflf-btn-bg-h, var(--uflf-more-h, var(--uflf-accent))); }

.uflf[data-btn-hover="lift"] .uflf-card .uflf-more:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.uflf[data-btn="link"][data-btn-hover="lift"] .uflf-card .uflf-more:hover { box-shadow: none; }
.uflf[data-btn-hover="grow"] .uflf-card .uflf-more:hover { transform: scale(1.06); }
.uflf[data-btn-hover="shrink"] .uflf-card .uflf-more:hover { transform: scale(.95); }
.uflf[data-btn-hover="shadow"] .uflf-card .uflf-more:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.uflf[data-btn-hover="arrow"] .uflf-card .uflf-more:hover::after,
.uflf[data-btn-hover="arrow"]:not([data-btn="theme"]) .uflf-card a.uflf-more:hover::after { transform: translateX(5px); }
.uflf[data-btn-hover="underline"] .uflf-card .uflf-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Linie wächst von links unter dem Text */
.uflf[data-btn-hover="line"] .uflf-card .uflf-more {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-position: 0 100%;
}
.uflf[data-btn-hover="line"] .uflf-card .uflf-more:hover { background-size: 100% 2px; }
.uflf[data-btn="button"][data-btn-hover="line"] .uflf-card .uflf-more,
.uflf[data-btn="outline"][data-btn-hover="line"] .uflf-card .uflf-more { background-position: 50% calc(100% - 6px); background-origin: content-box; }

/* Füllung schiebt sich hinein (Farbe: Hover-Hintergrund) */
.uflf[data-btn-hover="fill-left"] .uflf-card .uflf-more,
.uflf[data-btn-hover="fill-up"] .uflf-card .uflf-more {
	background-image: linear-gradient(var(--uflf-btn-fill), var(--uflf-btn-fill));
}
.uflf[data-btn-hover="fill-left"] .uflf-card .uflf-more { background-size: 0% 100%; background-position: 0 0; }
.uflf[data-btn-hover="fill-up"] .uflf-card .uflf-more { background-size: 100% 0%; background-position: 0 100%; }
.uflf[data-btn-hover="fill-left"] .uflf-card .uflf-more:hover,
.uflf[data-btn-hover="fill-up"] .uflf-card .uflf-more:hover { background-size: 100% 100%; filter: none; }
.uflf[data-btn="button"][data-btn-hover^="fill"] .uflf-card .uflf-more:hover { background-color: var(--uflf-btn-bg, var(--uflf-accent)); }
.uflf[data-btn="outline"][data-btn-hover^="fill"] .uflf-card .uflf-more:hover { background-color: transparent; }
.uflf[data-btn="link"][data-btn-hover^="fill"] .uflf-card .uflf-more:hover { color: var(--uflf-btn-text-h, var(--uflf-btn-text)); }

/* Glanz läuft über den Button */
.uflf[data-btn-hover="shine"] .uflf-card .uflf-more {
	background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
	background-size: 250% 100%;
	background-position: 100% 0;
}
.uflf[data-btn-hover="shine"] .uflf-card .uflf-more:hover { background-position: 0 0; filter: none; }

/* Pulsieren, solange die Maus darauf ist */
@keyframes uflf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.uflf[data-btn-hover="pulse"] .uflf-card .uflf-more:hover { animation: uflf-pulse calc(var(--uflf-btn-anim) * 3 + 300ms) var(--uflf-btn-ease) infinite; }

/* Wippen */
@keyframes uflf-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.uflf[data-btn-hover="wobble"] .uflf-card .uflf-more:hover { animation: uflf-wobble calc(var(--uflf-btn-anim) * 2 + 200ms) var(--uflf-btn-ease); }

/* ---------- Elemente ein-/ausblenden ---------- */

.uflf[data-image="0"] .uflf-media,
.uflf[data-date="0"] .uflf-date,
.uflf[data-text="0"] .uflf-text,
.uflf[data-article="0"] .uflf-article,
.uflf[data-button="0"]:not([data-card-link="1"]) .uflf-more { display: none; }

/* ---------- Layout: Raster ---------- */

.uflf--grid .uflf-track {
	display: grid;
	grid-template-columns: repeat(var(--uflf-cols), minmax(0, 1fr));
	align-items: stretch;
}

/* ---------- Layout: Liste ---------- */

.uflf--list .uflf-track { display: flex; flex-direction: column; }
.uflf--list .uflf-card { flex-direction: row; }
.uflf--list[data-list-img="right"] .uflf-card { flex-direction: row-reverse; }
.uflf--list .uflf-media { flex: 0 0 var(--uflf-list-img); aspect-ratio: auto; min-height: 200px; }
.uflf--list .uflf-media img { position: absolute; inset: 0; }
.uflf--list[data-list-img="top"] .uflf-card,
.uflf--list[data-image="0"] .uflf-card,
.uflf--list .uflf-card:not(:has(.uflf-media)) { flex-direction: column; }
.uflf--list[data-list-img="top"] .uflf-media { flex: none; aspect-ratio: var(--uflf-ratio); min-height: 0; }
.uflf--list[data-list-img="top"] .uflf-media img { position: static; }
@media (max-width: 640px) {
	.uflf--list:not([data-size]) .uflf-card { flex-direction: column; }
	.uflf--list:not([data-size]) .uflf-media { flex: none; aspect-ratio: var(--uflf-ratio); min-height: 0; }
	.uflf--list:not([data-size]) .uflf-media img { position: static; }
}
.uflf--list[data-size="m"] .uflf-card { flex-direction: column; }
.uflf--list[data-size="m"] .uflf-media { flex: none; aspect-ratio: var(--uflf-ratio); min-height: 0; }
.uflf--list[data-size="m"] .uflf-media img { position: static; }

/* ---------- Layout: Slider ---------- */

.uflf--slider .uflf-viewport { position: relative; }
.uflf--slider .uflf-track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 6px 2px 10px; /* Platz für Schatten und Hover-Bewegung */
}
.uflf--slider .uflf-track::-webkit-scrollbar { display: none; }
.uflf--slider .uflf-track:focus-visible { outline: 2px solid var(--uflf-accent); outline-offset: 4px; }
.uflf--slider .uflf-card {
	flex: 0 0 calc((100% - (var(--uflf-view) - 1) * var(--uflf-gap)) / var(--uflf-view));
	scroll-snap-align: start;
}

.uflf-nav { display: none; }
.uflf--slider .uflf-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 14px;
}
.uflf { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uflf[data-nav-shape="chevron"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uflf[data-nav-shape="chevron-thin"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uflf[data-nav-shape="chevron-bold"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uflf[data-nav-shape="arrow"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uflf[data-nav-shape="arrow-thin"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.uflf[data-nav-shape="triangle"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='black'/%3E%3C/svg%3E"); }

/* Pfeil-Schaltflächen: Grundform „gefüllt“ */
.uflf .uflf-nav .uflf-prev,
.uflf .uflf-nav .uflf-next {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--uflf-nav-size);
	height: var(--uflf-nav-size);
	padding: 0;
	border: var(--uflf-nav-bw) solid var(--uflf-nav-border, transparent);
	border-radius: var(--uflf-nav-radius);
	background: var(--uflf-nav-bg, var(--uflf-accent));
	color: var(--uflf-nav-icon, var(--uflf-btn-text));
	box-shadow: var(--uflf-nav-shadow);
	cursor: pointer;
	transition-property: opacity, background-color, color, border-color, transform, box-shadow;
	transition-duration: var(--uflf-btn-anim);
	transition-timing-function: var(--uflf-btn-ease);
}
/* Symbol als Maske: Farbe = Textfarbe der Schaltfläche, Form per data-nav-shape */
.uflf .uflf-nav .uflf-prev::before,
.uflf .uflf-nav .uflf-next::before {
	content: "";
	display: block;
	width: calc(var(--uflf-nav-size) * var(--uflf-nav-icon-size) / 100);
	height: calc(var(--uflf-nav-size) * var(--uflf-nav-icon-size) / 100);
	background: currentColor;
	-webkit-mask: var(--uflf-nav-svg) center / contain no-repeat;
	mask: var(--uflf-nav-svg) center / contain no-repeat;
	transition: transform var(--uflf-btn-anim) var(--uflf-btn-ease);
}
.uflf .uflf-nav .uflf-prev::before { transform: scaleX(-1); }
.uflf .uflf-nav .uflf-prev:hover,
.uflf .uflf-nav .uflf-next:hover {
	background: var(--uflf-nav-bg-h, var(--uflf-nav-bg, var(--uflf-accent)));
	color: var(--uflf-nav-icon-h, var(--uflf-nav-icon, var(--uflf-btn-text)));
	border-color: var(--uflf-nav-border-h, var(--uflf-nav-border, transparent));
}

/* Stil „Rahmen“: transparent, Symbol und Rahmen in Akzentfarbe, bei Hover gefüllt */
.uflf[data-nav-style="outline"] .uflf-nav .uflf-prev,
.uflf[data-nav-style="outline"] .uflf-nav .uflf-next {
	background: transparent;
	border-color: var(--uflf-nav-border, var(--uflf-nav-bg, var(--uflf-accent)));
	border-width: max(var(--uflf-nav-bw), 1px);
	color: var(--uflf-nav-icon, var(--uflf-nav-bg, var(--uflf-accent)));
}
.uflf[data-nav-style="outline"] .uflf-nav .uflf-prev:hover,
.uflf[data-nav-style="outline"] .uflf-nav .uflf-next:hover {
	background: var(--uflf-nav-bg-h, var(--uflf-nav-bg, var(--uflf-accent)));
	border-color: var(--uflf-nav-border-h, var(--uflf-nav-bg-h, var(--uflf-nav-border, var(--uflf-nav-bg, var(--uflf-accent)))));
	color: var(--uflf-nav-icon-h, var(--uflf-btn-text));
}

/* Stil „nur Symbol“: kein Hintergrund, kein Rahmen */
.uflf[data-nav-style="icon"] .uflf-nav .uflf-prev,
.uflf[data-nav-style="icon"] .uflf-nav .uflf-next,
.uflf[data-nav-style="icon"] .uflf-nav .uflf-prev:hover,
.uflf[data-nav-style="icon"] .uflf-nav .uflf-next:hover {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.uflf[data-nav-style="icon"] .uflf-nav .uflf-prev,
.uflf[data-nav-style="icon"] .uflf-nav .uflf-next { color: var(--uflf-nav-icon, var(--uflf-accent)); }
.uflf[data-nav-style="icon"] .uflf-nav .uflf-prev:hover,
.uflf[data-nav-style="icon"] .uflf-nav .uflf-next:hover { color: var(--uflf-nav-icon-h, var(--uflf-nav-icon, var(--uflf-accent))); }

/* Hover-Bewegung */
.uflf[data-nav-hover="grow"] .uflf-nav .uflf-prev:not(:disabled):hover,
.uflf[data-nav-hover="grow"] .uflf-nav .uflf-next:not(:disabled):hover { transform: scale(1.1); }
.uflf[data-nav-hover="slide"] .uflf-nav .uflf-next:not(:disabled):hover::before { transform: translateX(3px); }
.uflf[data-nav-hover="slide"] .uflf-nav .uflf-prev:not(:disabled):hover::before { transform: scaleX(-1) translateX(3px); }

.uflf .uflf-nav .uflf-prev:disabled,
.uflf .uflf-nav .uflf-next:disabled { opacity: .3; cursor: default; }
.uflf .uflf-nav .uflf-prev:focus-visible,
.uflf .uflf-nav .uflf-next:focus-visible,
.uflf .uflf-nav .uflf-dots button:focus-visible { outline: 2px solid var(--uflf-accent); outline-offset: 3px; }

/* Position */
.uflf[data-nav="below-sides"] .uflf-nav { justify-content: space-between; }
.uflf[data-nav="below-sides"] .uflf-dots { flex: 1; }

.uflf[data-nav="sides"] .uflf-nav .uflf-prev,
.uflf[data-nav="sides"] .uflf-nav .uflf-next {
	position: absolute;
	top: calc(50% - var(--uflf-nav-size) / 2 - 20px);
	z-index: 5;
}
.uflf[data-nav="sides"] .uflf-nav .uflf-prev { left: var(--uflf-nav-offset); }
.uflf[data-nav="sides"] .uflf-nav .uflf-next { right: var(--uflf-nav-offset); }

.uflf--slider[data-nav="top"] { padding-top: calc(var(--uflf-nav-size) + 12px); }
.uflf[data-nav="top"] .uflf-nav .uflf-prev,
.uflf[data-nav="top"] .uflf-nav .uflf-next { position: absolute; top: 0; z-index: 5; }
.uflf[data-nav="top"] .uflf-nav .uflf-next { right: max(0px, var(--uflf-nav-offset)); }
.uflf[data-nav="top"] .uflf-nav .uflf-prev { right: calc(max(0px, var(--uflf-nav-offset)) + var(--uflf-nav-size) + 8px); }
.uflf--slider[data-nav="top"].is-static { padding-top: 0; }

.uflf-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--uflf-dot-size) * .9); }
.uflf .uflf-nav .uflf-dots button {
	width: var(--uflf-dot-size);
	height: var(--uflf-dot-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--uflf-dot, var(--uflf-accent));
	opacity: .25;
	cursor: pointer;
	transition: opacity var(--uflf-anim), transform var(--uflf-anim), background-color var(--uflf-anim);
}
.uflf[style*="--uflf-dot:"] .uflf-nav .uflf-dots button { opacity: 1; }
.uflf .uflf-nav .uflf-dots button[aria-current="true"] { background: var(--uflf-dot-active, var(--uflf-dot, var(--uflf-accent))); opacity: 1; transform: scale(1.25); }

.uflf[data-arrows="0"] .uflf-nav .uflf-prev,
.uflf[data-arrows="0"] .uflf-nav .uflf-next,
.uflf[data-dots="0"] .uflf-dots { display: none; }
.uflf--slider[data-arrows="0"][data-dots="0"] .uflf-nav { display: none; }
.uflf.is-static .uflf-nav { display: none; } /* alle Karten passen ins Bild */

@media (prefers-reduced-motion: reduce) {
	.uflf--slider .uflf-track { scroll-behavior: auto; }
	.uflf-card,
	.uflf-media img,
	.uflf-more { transition: none; }
	.uflf .uflf-card:hover,
	.uflf .uflf-card .uflf-more:hover,
	.uflf .uflf-nav .uflf-prev:hover,
	.uflf .uflf-nav .uflf-next:hover { transform: none; animation: none; }
	.uflf .uflf-card .uflf-more,
	.uflf .uflf-nav .uflf-prev,
	.uflf .uflf-nav .uflf-next { transition-duration: 0s; }
}

.uflf-notice { padding: 12px 16px; border: 1px solid #dba617; background: #fcf9e8; }