/* =========================================================
   Aces Screenshot-Galerie
   Für das Partial View Macro "ScreenshotSlider"
   ========================================================= */

.screenshotslider {
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}


/* =========================================================
   Screenshot-Bereich
   ========================================================= */

.screenshotslider__viewport {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;

	background: #fff;
	border: 1px solid var(--col-contentbox-border-dark);
	border-radius: var(--border-radius-default);
}

/* =========================================================
   Slides mit Überblendung
   ========================================================= */

.screenshotslider__track {
	position: relative;
	width: 100%;
}

.screenshotslider__slide {
	position: absolute;
	inset: 0;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity .30s ease-in-out,
		visibility .30s ease-in-out;

	z-index: 1;
}

.screenshotslider__slide.is-active {
	position: relative;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	z-index: 2;
}

.screenshotslider__slide img {
	display: block;
	width: 100%;
	height: auto;

	border-radius: var(--border-radius-default);
}


/* =========================================================
   Ladezustand
   ========================================================= */

.screenshotslider.is-loading .screenshotslider__nav {
	cursor: wait;
	pointer-events: none;
	opacity: 0.72;
}


/* =========================================================
   Footer
   ========================================================= */

.screenshotslider__footer {
	width: 100%;
	margin: 0;
	padding: 8px 0 0 0;

	background: transparent;
	border: 0;
	box-shadow: none;
}

.screenshotslider__footer-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;

	width: 100%;
	margin: 0;
	padding: 0;
}


/* =========================================================
   Beschriftung
   ========================================================= */

.screenshotslider__caption {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;

	color: var(--col-aces-font);
	font-size: 0.95em;
	line-height: 1.4;
}

.screenshotslider__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;

	margin: 0 0 3px 0;
	padding: 0;

	color: var(--col-aces-blue);
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
}

.screenshotslider__counter {
	display: inline-block;
	flex: 0 0 auto;

	color: var(--col-aces-blue);
	font-size: 1em;
	font-weight: 600;
	white-space: nowrap;
}

.screenshotslider__titletext {
	display: inline;
	min-width: 0;
}

.screenshotslider__counter,
.screenshotslider__titletext {
	color: var(--col-aces-blue);
	font-size: 1em;
	font-weight: 600;
}

.screenshotslider__description {
	display: block;
	margin: 0;
	padding: 0;

	color: var(--col-aces-font-bright);
	font-size: 1em;
	line-height: 1.4;
}


/* =========================================================
   Navigation
   ========================================================= */

.screenshotslider__navwrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
	gap: 8px;

	margin: 0;
	padding: 0;
}

.screenshotslider__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;

	color: var(--col-aces-blue);
	background: #fff;

	border: 1px solid var(--col-contentbox-border-dark2);
	border-radius: var(--border-radius-large);
	box-shadow: none;

	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 1.45em;
	font-weight: 600;
	line-height: 1;

	cursor: pointer;

	transition:
		color 0.15s ease,
		background-color 0.15s ease,
		border-color 0.15s ease,
		opacity 0.15s ease;
}

.screenshotslider__nav {
	background: #fff;
	border: 1px solid #d9e1ea;
	border-radius: 6px;
}


.screenshotslider__nav:hover,
.screenshotslider__nav:focus {
	color: #fff;
	background: var(--col-aces-blue2);
	border-color: var(--col-aces-blue2);
	outline: 0;
}

.screenshotslider__nav:active {
	color: #fff;
	background: var(--col-aces-blue);
	border-color: var(--col-aces-blue);
}

.screenshotslider__nav:focus-visible {
	outline: 2px solid var(--col-aces-orange);
	outline-offset: 2px;
}

.screenshotslider__nav span {
	display: block;
	position: relative;
	top: -1px;
}


/* =========================================================
   Website-Regeln neutralisieren
   ========================================================= */

.screenshotslider button::before {
	content: none !important;
}

.screenshotslider button {
	text-transform: none;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 768px) {

	.screenshotslider__footer {
		padding-top: 7px;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.screenshotslider__footer-main {
		padding-left: 0 !important;
		padding-right: 0 !important;
		gap: 12px;
	}

	.screenshotslider__title {
		gap: 7px;
	}

	.screenshotslider__navwrap {
		gap: 6px;
	}

	.screenshotslider__nav {
		width: 40px;
		height: 40px;
		font-size: 1.35em;
	}
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 520px) {

	.screenshotslider__footer-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 10px;

		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.screenshotslider__footer {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.screenshotslider__caption {
		font-size: 0.92em;
	}

	.screenshotslider__title {
		display: block;
	}

	.screenshotslider__counter {
		margin-right: 7px;
	}

	.screenshotslider__navwrap {
		align-self: start;
	}

	.screenshotslider__nav {
		width: 36px;
		height: 36px;
		font-size: 1.25em;
	}
}


/* =========================================================
   Reduzierte Bewegung
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.screenshotslider__nav {
		transition: none;
	}
}


/* =========================================================
   Finale Größenkorrektur
   ========================================================= */

.screenshotslider .screenshotslider__nav {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	font-size: 1.1em !important;
}