/* Focustrend – animierte Referenzen auf /arbeiten/ (15.10.2026)
   Gehört zu wp-content/mu-plugins/ft-referenzen.php. Bewegung nur über transform/opacity – nichts drumherum verschiebt sich. */

@property --ftr-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Seite „Arbeiten“: Inhalt dunkel wie die anderen neuen Seiten (#16161d), Menübereich bleibt Theme-Grau (Wunsch 15.10.2026) */
body.page-id-3288 .page_content_wrap { background-color: #16161d !important; }
/* Grau unter dem Menü genau so hoch wie auf /leistungen/ (Wunsch 15.10.2026): Der erste Elementor-Baustein hat oben 50 px
   Außenabstand, der ohne flow-root aus dem dunklen Bereich heraus rutscht. So bleibt er im Dunkeln, die Überschrift am Platz. */
body.page-id-3288 .page_content_wrap { display: flow-root; }

.ftr-raster {
	--ftr-kopf: "Plus Jakarta Sans", sans-serif;
	--ftr-fliess: "DM Sans", sans-serif;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 32px;
	margin: 0;
	padding: 0;
}
.ftr-raster *, .ftr-raster *::before, .ftr-raster *::after { box-sizing: border-box; }

.ftr-karte { position: relative; min-width: 0; margin: 0; }

/* ---------- Bühne ---------- */
.ftr-raster .ftr-buehne {
	--tx: 0; --ty: 0; --heb: 0px; --gr: 1; --hx: 0px; --hy: 0px; --hd: 0deg;
	position: relative;
	display: block;
	aspect-ratio: 1 / 1; /* alle Fenster gleich groß und quadratisch */
	border-radius: 24px;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	color: inherit;
	background:
		radial-gradient(110% 95% at 88% -5%, var(--akz-a) 0%, transparent 58%),
		radial-gradient(80% 90% at -10% 110%, rgba(76, 58, 201, .38) 0%, transparent 60%),
		linear-gradient(160deg, #24242e 0%, #17171d 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 60px -30px rgba(0, 0, 0, .9);
	transform: perspective(1100px) rotateX(calc(var(--ty) * -5deg)) rotateY(calc(var(--tx) * 7deg));
	transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
	-webkit-tap-highlight-color: transparent;
}
/* feines Punktraster */
.ftr-buehne::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
}
/* ruhiger Rahmen */
.ftr-buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, .07);
	pointer-events: none;
}
/* umlaufender Lichtrahmen */
.ftr-rand {
	position: absolute;
	inset: 0;
	z-index: 7;
	border-radius: inherit;
	padding: 1.5px;
	pointer-events: none;
	background: conic-gradient(from var(--ftr-w), transparent 0deg, var(--akz) 50deg, #6d5cff 110deg, transparent 170deg, transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .55;
	animation: ftr-dreh 7s linear infinite;
	animation-delay: var(--verz, 0s);
	transition: opacity .5s ease;
}
/* Lichtkegel folgt der Maus */
.ftr-licht {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 0%), var(--akz-a), transparent 50%);
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

/* ---------- Browserfenster ---------- */
.ftr-browser {
	position: absolute;
	left: 8%;
	right: 17%;
	top: 10%;
	bottom: -14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	background: #0f0f14;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -18px rgba(0, 0, 0, .95), 0 0 70px -18px var(--akz-a);
	transform: translate3d(calc(var(--tx) * -10px), calc(var(--ty) * -8px + var(--heb)), 0) scale(var(--gr));
	transform-origin: 50% 100%;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ftr-browser::after { /* Glanz, der alle paar Sekunden darüberstreicht */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%);
	transform: translateX(-120%);
	animation: ftr-glanz 9s ease-in-out infinite;
	animation-delay: var(--verz-h, 0s);
}
.ftr-leiste {
	flex: 0 0 26px;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 10px;
	background: #2a2a35;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ftr-leiste i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.ftr-leiste i:nth-child(2) { background: #febc2e; }
.ftr-leiste i:nth-child(3) { background: #28c840; }
.ftr-adresse {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 260px;
	height: 16px;
	margin: 0 auto 0 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 8px;
	border-radius: 8px;
	background: #1b1b23;
	color: #c3c8d2;
	font: 500 10px/1 var(--ftr-fliess);
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
}
.ftr-adresse svg { flex: none; color: #8f96a3; }
.ftr-url { overflow: hidden; text-overflow: ellipsis; }
.ftr-live {
	flex: none;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	color: #7ee2a8;
	font: 700 8.5px/1 var(--ftr-fliess);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.ftr-live b { width: 6px; height: 6px; border-radius: 50%; background: #28c840; animation: ftr-puls 2.2s ease-out infinite; }
.ftr-schirm {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	container-type: size;
	background: linear-gradient(180deg, #2c2c37 0%, #1d1d25 100%); /* bis das Bild da ist */
}
.ftr-raster .ftr-seite {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	border-radius: 0;
	animation: ftr-lauf var(--dauer, 19s) cubic-bezier(.55, 0, .45, 1) infinite;
	animation-delay: var(--verz, 0s);
}
.ftr-kurz .ftr-schirm { background: #000; }
.ftr-kurz .ftr-schirm .ftr-seite { animation: none; height: 100%; object-fit: contain; object-position: 50% 45%; }
.ftr-raster .ftr-standbild { animation: none; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ---------- Handy ---------- */
.ftr-handy-platz {
	position: absolute;
	right: 5%;
	bottom: 6%;
	height: 57%;
	z-index: 4;
	transform: translate3d(calc(var(--tx) * 16px + var(--hx)), calc(var(--ty) * 12px + var(--hy)), 0) rotate(var(--hd));
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.ftr-handy {
	position: relative;
	display: block;
	height: 100%;
	aspect-ratio: 9 / 19.5;
	padding: 4px;
	border-radius: 20px;
	background: linear-gradient(145deg, #44444f 0%, #16161b 45%, #2b2b33 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 50px -14px rgba(0, 0, 0, .95), 0 0 46px -10px var(--akz-a);
	animation: ftr-schweben 7s ease-in-out infinite;
	animation-delay: var(--verz-h, 0s);
}
.ftr-handy::before { /* Kamera-Insel */
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	z-index: 2;
	width: 30%;
	height: 7px;
	border-radius: 6px;
	background: #07070a;
	transform: translateX(-50%);
}
.ftr-handy-schirm {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	container-type: size;
	background: linear-gradient(180deg, #2c2c37 0%, #1d1d25 100%);
}
.ftr-handy .ftr-seite { animation-duration: 15s; animation-delay: var(--verz-h, 0s); }

/* ---------- Knopf „Projekt ansehen“ ---------- */
.ftr-mehr {
	position: absolute;
	left: 7%;
	bottom: 18px;
	z-index: 8;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 17px;
	border-radius: 999px;
	background: #fff;
	color: #15151c;
	font: 700 13px/1 var(--ftr-kopf);
	letter-spacing: .01em;
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7), 0 0 0 4px var(--akz-b);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}
.ftr-mehr svg { transition: transform .4s ease; }

/* ---------- Text unter der Bühne ---------- */
.ftr-text { padding: 20px 4px 0; }
.ftr-zeile { display: flex; align-items: center; gap: 12px; }
.ftr-nr {
	flex: none;
	font: 800 13px/1 var(--ftr-kopf);
	letter-spacing: .08em;
	color: var(--akz);
}
.ftr-nr::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1.5px;
	margin-left: 10px;
	vertical-align: middle;
	background: linear-gradient(90deg, var(--akz), transparent);
}
.ftr-raster .ftr-titel {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #fff;
	font: 700 clamp(19px, 1.45vw, 23px)/1.25 var(--ftr-kopf);
	letter-spacing: -.01em;
	text-transform: none;
}
.ftr-raster .ftr-titel a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(var(--akz), var(--akz)) 0 100% / 0 2px no-repeat;
	transition: background-size .45s cubic-bezier(.2, .8, .2, 1);
	padding-bottom: 2px;
}
.ftr-raster .ftr-titel a:hover,
.ftr-karte:hover .ftr-titel a { background-size: 100% 2px; }
.ftr-jahr {
	flex: none;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	color: #9ba2ad;
	font: 600 12px/1 var(--ftr-fliess);
}
.ftr-raster .ftr-unter {
	margin: 10px 0 0;
	padding: 0;
	color: #9ba2ad;
	font: 400 15px/1.5 var(--ftr-fliess);
}
.ftr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ftr-raster .ftr-tags a {
	padding: 7px 11px;
	border-radius: 999px;
	background: #292933;
	color: #c9cdd6;
	font: 500 12px/1 var(--ftr-fliess);
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}
.ftr-raster .ftr-tags a:hover { background: var(--akz); color: #fff; }

/* ---------- ohne Handy-Foto ---------- */
.ftr-ohne-handy .ftr-browser { right: 7%; }

/* ---------- Maus darüber ---------- */
@media (hover: hover) {
	.ftr-raster .ftr-buehne:hover { --heb: -8px; --gr: 1.02; --hx: -6px; --hy: -12px; --hd: -3deg; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 34px 80px -30px var(--akz-a); }
	.ftr-buehne:hover .ftr-rand { opacity: 1; }
	.ftr-buehne:hover .ftr-licht { opacity: 1; }
	.ftr-buehne:hover .ftr-mehr { opacity: 1; transform: none; }
	.ftr-buehne:hover .ftr-mehr svg { transform: translateX(3px); }
}
.ftr-raster .ftr-buehne:focus-visible { outline: 2px solid var(--akz); outline-offset: 4px; }
.ftr-buehne:focus-visible .ftr-mehr { opacity: 1; transform: none; }

/* ---------- Einblenden beim Scrollen (nur wo der Browser das kann; nicht am Handy, siehe unten) ---------- */
@supports (animation-timeline: view()) {
	@media (hover: hover) and (prefers-reduced-motion: no-preference) {
		.ftr-karte {
			animation: ftr-auf linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
}

/* Bewegung nur in Karten, die gerade im Bild sind (ref.js setzt .ftr-an). Angehaltene Animationen behalten am iPhone
   ihre Grafik-Ebenen – bei 21 Karten mit je zwei langen Bildern war das zu viel Speicher und Safari hat die Seite
   abgebrochen („wiederholt ein Problem aufgetreten“, 15.10.2026). Darum hier ganz abschalten statt nur anhalten. */
.ftr-karte:not(.ftr-an) .ftr-seite,
.ftr-karte:not(.ftr-an) .ftr-handy,
.ftr-karte:not(.ftr-an) .ftr-rand,
.ftr-karte:not(.ftr-an) .ftr-browser::after,
.ftr-karte:not(.ftr-an) .ftr-live b { animation: none; }
.ftr-raster picture { display: contents; }

/* ---------- Animationen ---------- */
@keyframes ftr-dreh { to { --ftr-w: 360deg; } }
@keyframes ftr-lauf {
	0%, 9% { transform: translate3d(0, 0, 0); }
	46%, 56% { transform: translate3d(0, calc(-100% + 100cqh), 0); }
	93%, 100% { transform: translate3d(0, 0, 0); }
}
@keyframes ftr-schweben {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-8px) rotate(-1.2deg); }
}
@keyframes ftr-glanz {
	0%, 62% { transform: translateX(-120%); }
	80%, 100% { transform: translateX(120%); }
}
@keyframes ftr-puls {
	0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, .65); }
	100% { box-shadow: 0 0 0 7px rgba(40, 200, 64, 0); }
}
@keyframes ftr-auf {
	from { opacity: 0; transform: translateY(70px) scale(.95); }
	to { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
	.ftr-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
}

/* ---------- Handy ---------- */
@media (max-width: 680px) {
	.ftr-raster { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.ftr-raster .ftr-buehne { border-radius: 20px; }
	.ftr-browser { left: 7%; right: 17%; top: 10%; }
	.ftr-leiste { flex-basis: 22px; padding: 0 8px; gap: 4px; }
	.ftr-leiste i { width: 6px; height: 6px; }
	.ftr-adresse { margin-left: 6px; height: 14px; font-size: 9px; }
	.ftr-live { display: none; }
	.ftr-handy-platz { right: 5%; height: 56%; }
	.ftr-handy { border-radius: 16px; padding: 3px; }
	.ftr-handy::before { top: 7px; height: 5px; }
	.ftr-handy-schirm { border-radius: 13px; }
	.ftr-text { padding-top: 16px; }
	.ftr-raster .ftr-unter { font-size: 14px; }
}

/* Touch-Geräte: kleiner runder Pfeil-Knopf statt Schriftzug (die Bühne ist ohnehin ein Link).
   Neigen gibt es ohne Maus nicht – die Ruhe-Transforms würden nur zusätzliche Grafik-Ebenen kosten (Speicher am iPhone).
   Der Lichtrahmen steht still: das Drehen zeichnet die ganze Karte in jedem Bild neu. */
@media (hover: none) {
	.ftr-raster .ftr-buehne, .ftr-browser, .ftr-handy-platz { transform: none; transition: none; }
	.ftr-raster .ftr-rand { animation: none; }
	.ftr-mehr { opacity: 1; transform: none; width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; font-size: 0; bottom: 12px; left: 5%; }
	.ftr-mehr svg { width: 17px; height: 17px; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt ruhige Bilder */
@media (prefers-reduced-motion: reduce) {
	.ftr-raster *, .ftr-raster *::before, .ftr-raster *::after { animation: none !important; }
	.ftr-raster .ftr-buehne, .ftr-browser, .ftr-handy-platz { transition: none; }
}