/**
 * Theme Part M39 - Referenzen (Redesign 2026, nur neue Ausgabe .m39_2026)
 * Die alte Ausgabe wird weiterhin über _m39_references_retouch.scss (main.css) gestylt.
 *
 * @author MediaMEANS
**/

section.m39_referenzen.m39_2026 {
	position: relative;
	z-index: 2;
}

/* === Abstand (Backend: Abstände) === */
section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
	padding-top: 40px;
	padding-bottom: 40px;
}

section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_oben"] {
	padding-top: 40px;
}

section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_unten"] {
	padding-bottom: 40px;
}

/* cards reach into the hero above */
section.m84_header_startseite_2026 + section.m39_referenzen.m39_2026 {
	margin-top: -245px;
}

/* ---------- Grid ---------- */
section.m39_referenzen.m39_2026 .m39_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	perspective: 1200px;
}

section.m39_referenzen.m39_2026 .m39_ref {
	position: relative;
	display: block;
	width: calc((100% - 40px) / 3);
	aspect-ratio: 2 / 3;
	overflow: hidden;
	isolation: isolate;
	border-radius: 24px;
	background: #08083E;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 30px 60px -34px rgba(8, 8, 62, .55);
	color: #fff;
	text-decoration: none;
	transform-style: preserve-3d;
	-webkit-transition: transform .6s cubic-bezier(.2, .7, .1, 1), box-shadow .5s cubic-bezier(.2, .7, .1, 1);
	transition: transform .6s cubic-bezier(.2, .7, .1, 1), box-shadow .5s cubic-bezier(.2, .7, .1, 1);
}

/* while the mouse moves the tilt follows directly */
section.m39_referenzen.m39_2026 .m39_ref.is-tilt {
	-webkit-transition: transform .12s linear, box-shadow .5s cubic-bezier(.2, .7, .1, 1);
	transition: transform .12s linear, box-shadow .5s cubic-bezier(.2, .7, .1, 1);
}

section.m39_referenzen.m39_2026 .m39_ref:hover {
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 44px 80px -36px rgba(8, 8, 62, .7);
	color: #fff;
}

/* ---------- Bild ---------- */
section.m39_referenzen.m39_2026 .m39_ref_img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

/* size + object-fit: global class .coverimg */
section.m39_referenzen.m39_2026 .m39_ref_img img {
	display: block;
	transform: scale(1.02);
	-webkit-transition: transform 1.1s cubic-bezier(.2, .7, .1, 1);
	transition: transform 1.1s cubic-bezier(.2, .7, .1, 1);
}

section.m39_referenzen.m39_2026 .m39_ref:hover .m39_ref_img img {
	transform: scale(1.08);
}

section.m39_referenzen.m39_2026 .m39_ref_img::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(8, 8, 62, .45) 0%, rgba(8, 8, 62, 0) 26%, rgba(8, 8, 62, 0) 46%, rgba(8, 8, 62, .88) 100%);
}

/* light reflection, position is set by JS */
section.m39_referenzen.m39_2026 .m39_ref_glare {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: radial-gradient(420px circle at 50% 50%, rgba(255, 255, 255, .18), transparent 45%);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity .4s;
	transition: opacity .4s;
}

section.m39_referenzen.m39_2026 .m39_ref:hover .m39_ref_glare {
	opacity: 1;
}

/* ---------- Branche ---------- */
section.m39_referenzen.m39_2026 .m39_ref_top {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	display: flex;
	align-items: center;
}

section.m39_referenzen.m39_2026 .m39_ref_cat {
	display: inline-flex;
	align-items: center;
	padding: 9px 12px 6px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(8, 8, 62, .42);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-family: Nexa-Heavy, sans-serif; /* 800 */
	font-weight: 400;
	font-size: .75rem;
	line-height: 1.2;
}

/* ---------- Name, Tags, Pfeil ---------- */
section.m39_referenzen.m39_2026 .m39_ref_info {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

section.m39_referenzen.m39_2026 .m39_ref_info_text {
	min-width: 0;
}

section.m39_referenzen.m39_2026 .m39_ref_info b {
	display: block;
	font-family: Nexa-Heavy, sans-serif; /* 900 */
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: -.03rem;
}

section.m39_referenzen.m39_2026 .m39_ref_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 0;
	margin-top: 10px;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: max-height .5s cubic-bezier(.2, .7, .1, 1), opacity .4s;
	transition: max-height .5s cubic-bezier(.2, .7, .1, 1), opacity .4s;
}

section.m39_referenzen.m39_2026 .m39_ref:hover .m39_ref_tags,
section.m39_referenzen.m39_2026 .m39_ref:focus-visible .m39_ref_tags {
	max-height: 60px;
	opacity: 1;
}

section.m39_referenzen.m39_2026 .m39_ref_tags i {
	padding: 5px 10px 3px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	font-family: Nexa-Bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: .71875rem;
}

section.m39_referenzen.m39_2026 .m39_ref_go {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	color: #08083E;
	-webkit-transition: background .3s, color .3s, transform .5s cubic-bezier(.2, .7, .1, 1);
	transition: background .3s, color .3s, transform .5s cubic-bezier(.2, .7, .1, 1);
}

section.m39_referenzen.m39_2026 .m39_ref_go svg,
section.m39_referenzen.m39_2026 .m39_ref_go img {
	display: block;
	width: 16px;
	height: 16px;
}

section.m39_referenzen.m39_2026 .m39_ref:hover .m39_ref_go {
	background: #FE5B4A;
	color: #fff;
	transform: rotate(-45deg);
}

/* ---------- Button ---------- */
section.m39_referenzen.m39_2026 .m39_link_container {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

/* Nexa sitzt hoch in der Zeile: oben mehr Padding als unten */
section.m39_referenzen.m39_2026 .m39_button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 26px 14px;
	border-radius: 999px;
	background: #FE5B4A;
	color: #fff;
	font-family: Nexa-Heavy, sans-serif; /* 800 */
	font-weight: 400;
	font-size: .9375rem;
	line-height: 1.3;
	letter-spacing: -.005rem;
	text-decoration: none;
	-webkit-transition: background .25s, transform .25s;
	transition: background .25s, transform .25s;
}

section.m39_referenzen.m39_2026 .m39_button:hover {
	background: #ff735f;
	color: #fff;
}

section.m39_referenzen.m39_2026 .m39_button:active {
	transform: scale(.98);
}

section.m39_referenzen.m39_2026 .m39_button_icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	margin-top: -4px;
	-webkit-transition: transform .3s;
	transition: transform .3s;
}

section.m39_referenzen.m39_2026 .m39_button_icon svg,
section.m39_referenzen.m39_2026 .m39_button_icon img {
	display: block;
	width: 100%;
	height: 100%;
}

section.m39_referenzen.m39_2026 .m39_button:hover .m39_button_icon {
	transform: translateX(4px);
}

/* ---------- Reveal (Startzustand nur mit JS) ---------- */
section.m39_referenzen.m39_2026.m39_js .m39_ref {
	opacity: 0;
	translate: 0 26px;
}

section.m39_referenzen.m39_2026.m39_js .m39_ref.is-in {
	opacity: 1;
	translate: 0 0;
	-webkit-transition: opacity .9s cubic-bezier(.2, .7, .1, 1), translate 1s cubic-bezier(.2, .7, .1, 1), transform .6s cubic-bezier(.2, .7, .1, 1), box-shadow .5s cubic-bezier(.2, .7, .1, 1);
	transition: opacity .9s cubic-bezier(.2, .7, .1, 1), translate 1s cubic-bezier(.2, .7, .1, 1), transform .6s cubic-bezier(.2, .7, .1, 1), box-shadow .5s cubic-bezier(.2, .7, .1, 1);
}

section.m39_referenzen.m39_2026.m39_js .m39_ref.is-in.is-tilt {
	-webkit-transition: opacity .9s cubic-bezier(.2, .7, .1, 1), translate 1s cubic-bezier(.2, .7, .1, 1), transform .12s linear, box-shadow .5s cubic-bezier(.2, .7, .1, 1);
	transition: opacity .9s cubic-bezier(.2, .7, .1, 1), translate 1s cubic-bezier(.2, .7, .1, 1), transform .12s linear, box-shadow .5s cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 1399px) {
	section.m84_header_startseite_2026 + section.m39_referenzen.m39_2026 {
		margin-top: -220px;
	}

	section.m39_referenzen.m39_2026 .m39_ref_info b {
		font-size: 1.375rem;
	}
}

@media screen and (max-width: 1199px) {
	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_oben"] {
		padding-top: 36px;
	}

	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_unten"] {
		padding-bottom: 36px;
	}

	section.m84_header_startseite_2026 + section.m39_referenzen.m39_2026 {
		margin-top: -190px;
	}

	section.m39_referenzen.m39_2026 .m39_grid {
		gap: 18px;
	}

	section.m39_referenzen.m39_2026 .m39_ref {
		width: calc((100% - 36px) / 3);
	}

	section.m39_referenzen.m39_2026 .m39_ref_info b {
		font-size: 1.25rem;
	}
}

@media screen and (max-width: 991px) {
	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_oben"] {
		padding-top: 30px;
	}

	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_unten"] {
		padding-bottom: 30px;
	}

	section.m84_header_startseite_2026 + section.m39_referenzen.m39_2026 {
		margin-top: -160px;
	}

	section.m39_referenzen.m39_2026 .m39_grid {
		gap: 16px;
	}

	section.m39_referenzen.m39_2026 .m39_ref {
		width: calc((100% - 16px) / 2);
	}

	section.m39_referenzen.m39_2026 .m39_ref_info b {
		font-size: 1.1875rem;
	}
}

/* phones: horizontal scroll with snap, the next card peeks in */
@media screen and (max-width: 767px) {
	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_oben_und_unten"] {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_oben"] {
		padding-top: 24px;
	}

	section.m39_referenzen.m39_2026[data-innerer-abstand="innerer_abstand_nur_unten"] {
		padding-bottom: 24px;
	}

	section.m84_header_startseite_2026 + section.m39_referenzen.m39_2026 {
		margin-top: -150px;
	}

	section.m39_referenzen.m39_2026 .m39_grid {
		flex-wrap: nowrap;
		gap: 12px;
		margin: 0 -12px;
		padding: 0 12px 24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	section.m39_referenzen.m39_2026 .m39_grid::-webkit-scrollbar {
		display: none;
	}

	section.m39_referenzen.m39_2026 .m39_ref {
		flex: none;
		width: 74%;
		scroll-snap-align: center;
	}

	section.m39_referenzen.m39_2026 .m39_ref_tags {
		display: none;
	}
}

@media screen and (max-width: 575px) {
	section.m39_referenzen.m39_2026 .m39_grid {
		margin: 0 -20px;
		padding: 0 20px 24px;
	}
}

@media screen and (max-width: 375px) {
	section.m39_referenzen.m39_2026 .m39_ref {
		width: 82%;
	}

	section.m39_referenzen.m39_2026 .m39_ref_info {
		left: 16px;
		right: 16px;
		bottom: 16px;
		gap: 10px;
	}

	section.m39_referenzen.m39_2026 .m39_ref_go {
		width: 40px;
		height: 40px;
	}

	section.m39_referenzen.m39_2026 .m39_button {
		padding: 16px 18px 12px;
		font-size: .8125rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	section.m39_referenzen.m39_2026 *,
	section.m39_referenzen.m39_2026 *::before,
	section.m39_referenzen.m39_2026 *::after {
		transition-duration: .001ms !important;
	}
}