/*
 * 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-nav-size: 42px;
	--uflf-nav-radius: 50%;
	--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-more::before { content: ""; position: absolute; inset: 0; z-index: 3; }
.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"] .uflf-more { position: static; display: block; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; }

/* ---------- 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) nicht gewinnen. */

.uflf .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;
	transition: color var(--uflf-anim) ease, background-color var(--uflf-anim) ease, border-color var(--uflf-anim) ease, transform var(--uflf-anim) ease, filter var(--uflf-anim) ease;
}
.uflf[data-arrow="1"] .uflf-more::after { content: "\00a0→"; display: inline-block; transition: transform var(--uflf-anim) ease; }

.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-more { color: var(--uflf-more, var(--uflf-accent)); }
.uflf[data-btn="link"] .uflf-more:hover { color: var(--uflf-more-h, var(--uflf-more, var(--uflf-accent))); }

/* Button gefüllt bzw. mit Rahmen */
.uflf[data-btn="button"] .uflf-more,
.uflf[data-btn="outline"] .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-more {
	background: var(--uflf-btn-bg, var(--uflf-accent));
	color: var(--uflf-btn-text);
}
.uflf[data-btn="button"] .uflf-more:hover {
	background: 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-more:hover { filter: brightness(1.08); }

.uflf[data-btn="outline"] .uflf-more {
	background: transparent;
	color: var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent)));
}
.uflf[data-btn="outline"] .uflf-more:hover {
	background: 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-more { font-size: revert; font-weight: revert; text-transform: revert; letter-spacing: revert; line-height: revert; }

/* Hover-Bewegung */
.uflf[data-btn-hover="lift"] .uflf-more:hover { transform: translateY(-2px); }
.uflf[data-btn-hover="grow"] .uflf-more:hover { transform: scale(1.05); }
.uflf[data-btn-hover="arrow"] .uflf-more:hover::after { transform: translateX(4px); }
.uflf[data-btn-hover="underline"] .uflf-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 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-prev,
.uflf-next {
	flex: 0 0 auto;
	width: var(--uflf-nav-size);
	height: var(--uflf-nav-size);
	padding: 0;
	border: 0;
	border-radius: var(--uflf-nav-radius);
	background: var(--uflf-nav-bg, var(--uflf-accent));
	color: var(--uflf-nav-icon, var(--uflf-btn-text));
	cursor: pointer;
	transition: opacity var(--uflf-anim), background-color var(--uflf-anim), color var(--uflf-anim);
}
.uflf-prev::before,
.uflf-next::before {
	content: "";
	display: block;
	width: calc(var(--uflf-nav-size) * .24);
	height: calc(var(--uflf-nav-size) * .24);
	margin: auto;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateX(15%) rotate(135deg);
}
.uflf-next::before { transform: translateX(-15%) rotate(-45deg); }
.uflf-prev:hover,
.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)));
}
.uflf-prev:disabled,
.uflf-next:disabled { opacity: .3; cursor: default; }
.uflf-prev:focus-visible,
.uflf-next:focus-visible,
.uflf-dots button:focus-visible { outline: 2px solid var(--uflf-accent); outline-offset: 3px; }

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

.uflf-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--uflf-dot-size) * .9); }
.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-dots button { opacity: 1; }
.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-prev,
.uflf[data-arrows="0"] .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-more:hover { transform: none; }
}

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