/* =============================================================
   TECHNOLOGY PARTNER — Screenshot-Lightbox.

   Gegenstueck zu assets/js/technology-partner-lightbox.js. Tokens
   des Design-Systems, damit die Lightbox aussieht wie der Rest der
   Site; alle Werte mit Fallback, falls das Stylesheet einmal ohne
   die Variablen geladen wird.
   ============================================================= */

/* Seite hinter der Lightbox nicht mitscrollen lassen. */
html.tpl-open,
html.tpl-open body { overflow: hidden; }

.tpl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-16, 16px);
	padding: clamp(16px, 4vw, 48px);
	background: rgba(10, 16, 29, 0.88);
	backdrop-filter: blur(2px);
}

.tpl-lightbox[hidden] { display: none; }

.tpl-stage {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(1200px, 100%);
	max-height: 100%;
}

.tpl-image {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - clamp(96px, 16vw, 160px));
	width: auto;
	height: auto;
	object-fit: contain;
	background: var(--color-white, #fff);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.tpl-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: var(--color-white, #fff);
	cursor: pointer;
	transition: background var(--duration-xs, 0.15s) var(--ease-smooth, ease),
	            border-color var(--duration-xs, 0.15s) var(--ease-smooth, ease);
}

.tpl-btn svg { width: 20px; height: 20px; min-width: 0; min-height: 0; }

.tpl-btn[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
	.tpl-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); }
}

.tpl-btn:focus-visible { outline: 2px solid var(--color-white, #fff); outline-offset: 2px; }

/* Schliessen sitzt in der Ecke, die Pfeile flankieren das Bild. */
.tpl-close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }

.tpl-counter {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(12px, 3vw, 28px);
	margin: 0;
	text-align: center;
	font-family: var(--font-heading, inherit);
	font-size: var(--text-12, 12px);
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.7);
}

/* Auf schmalen Schirmen wandern die Pfeile unter das Bild, sonst
   bliebe dem Screenshot kaum Breite. */
@media (max-width: 639px) {
	.tpl-lightbox { flex-wrap: wrap; align-content: center; }
	.tpl-stage { order: -1; flex-basis: 100%; }
}