:root {
	--z-distance: 8.519vw;
	--from-left: 1;
	--mobile-bkp: 650px;
	--img-prev: url(../OVGU_Design/1-sw.jpg);
	--img-next: url(../OVGU_Design/2-sw.jpg);
	--ovgu-beere: #5a0038;
	--ovgu-bordeaux: #7a0034;
}

/* Slider Grundstil */
.slider {
	width: 100%;
	height: 60vh;
	max-height: 500px;
	display: flex;
	perspective: 1000px;
	transform-style: preserve-3d;
	margin-top: 120px; /* Erhoeht, um Platz fuer den Header zu schaffen */
	margin-bottom: 3rem;
	position: relative;
	z-index: 10;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* Staerkerer, deutlicherer Schatten */
}

@media (max-width: 768px) {
	.slider {
		margin-top: 100px; /* Angepasst fuer Tablets */
		height: 50vh;
		max-height: 450px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Konsistenter Schatten */
	}
}

@media (max-width: 576px) {
	.slider {
		margin-top: 80px; /* Angepasst fuer Smartphones */
		height: 40vh;
		max-height: 350px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Konsistenter Schatten */
	}
}

.slider::before, .slider::after {
	content: '';
	left: 0;
	top: 0;
	display: block;
	position: absolute;
	width: 100%;
	height: 60vh;
	max-height: 500px;
	background-position: center;
	background-size: cover;
	will-change: opacity;
	z-index: -1;
	box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.7) inset;
}

.slider::before {
	background-image: var(--img-prev);
}

.slider::after {
	transition: opacity 0.7s;
	opacity: 0;
	background-image: var(--img-next);
}

.slider--bg-next::after {
	opacity: 1;
}

.slider__content {
	margin: auto;
	width: 65vw;
	height: 32.5vw;
	max-height: 60vh;
	will-change: transform;
	transform-style: preserve-3d;
	pointer-events: none;
	z-index: 100;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); /* Sehr deutlicher Schatten */
	transform: translateZ(var(--z-distance));
	
	max-width: 1000px;
	max-height: 600px;
}

/* Slider Bilder */
.slider__images {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	box-shadow: 0 0 5em #000;
}

.slider__images-item {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	will-change: transform;
	transition: transform 0.3s ease-in-out;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); /* Deutlicher Schatten fuer die Bilder */
	visibility: hidden;
}

.slider__images-item img {
	display: block;
	position: relative;
	left: -1em;
	top: -1em;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.8)); /* Deutlicher Schatten mit Filter */
}

.slider__images-item--active {
	z-index: 20;
	visibility: visible;
	filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.8)); /* Deutlicher Schatten mit Filter */
}

.slider__images-item--subactive {
	z-index: 15;
	visibility: visible;
}

.slider__images-item--next {
	transform: translateX(100%);
}

.slider__images-item--prev {
	transform: translateX(-100%);
}

.slider__images-item--transit {
	transition: transform 0.7s, opacity 0.7s;
}

/* Slider Text */
.slider__text {
	position: relative;
	height: 100%;
}

.slider__text-item {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0.5em;
	perspective: 1000px;
	transform-style: preserve-3d;
}

.slider__text-item > * {
	overflow: hidden;
	position: absolute;
}

.slider__text-item h3, .slider__text-item p {
	transition: transform 0.35s ease-out;
	line-height: 1.5;
	overflow: hidden;
}

.slider__text-item h3 {
	background-color: rgba(255, 255, 255, 0.5);
	color: var(--ovgu-beere);
}

.slider__text-item p {
	font-family: sans-serif;
	padding: 1em;
	color: white;
	text-align: center;
	background-color: rgba(90, 0, 56, 0.7);
}

.slider__text-item h3::before, .slider__text-item p::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 105%;
	height: 100%;
	transform: translateX(0);
	transition: transform 0.35s ease-out 0.28s;
}

.slider__text-item h3::before {
	background-color: #000;
}

.slider__text-item p::before {
	background-color: #fff;
}

.slider__text-item h3 {
	margin: 0;
	font-size: 2.5em;
	padding: 0 .3em;
	position: relative;
	font-weight: 700;
	transform: translateX(-100%);
}

.slider__text-item p {
	margin: 0;
	transform: translateX(100%);
}

.slider__text-item-head {
	top: -0.5em;
	transform: translateZ(3em);
	clip-path: polygon(0 0, .5em 100%, 100% 100%, calc(100% - .3em) .3em);
}

.slider__text-item-info {
	bottom: 0;
	right: 0;
	max-width: 75%;
	min-width: min-content;
	transform: translateZ(2em);
	clip-path: polygon(0.5em 0, 100% 0%, calc(100% - .5em) 100%, 0 calc(100% - .5em));
}

.slider__text-item--active h3, .slider__text-item--active p {
	transform: translateX(0);
}

.slider__text-item--active h3::before {
	transform: translateX(102%);
}

.slider__text-item--active p::before {
	transform: translateX(-102%);
}

.slider__text-item--backwards h3::before, .slider__text-item--backwards p::before {
	transition: transform 0.35s ease-in;
}

.slider__text-item--backwards h3, .slider__text-item--backwards p {
	transition: transform 0.35s ease-in 0.35s;
}

/*Slider Links*/
.slider__link-item {
	display: none;
	position: absolute;
	
	left: 20vw;
	right: 20vw;
	top: 0;
	bottom: 0;
}

.slider__link-item.slider__link-item--active {
	display: block;
}

/* Slider Navigation */
.slider__nav {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

.slider__nav-arrows {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.slider__nav-arrow {
	height: 60vh;
	max-height: 500px;
	width: 50vw;
	text-indent: -9999px;
	white-space: nowrap;
	cursor: pointer;
}

.slider__nav-arrow--left {
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='3 1 1 2 3 3' stroke='%235a0038' stroke-width='.3' stroke-opacity='1' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
	cursor: var(--arrow) 40 40, auto;
}

.slider__nav-arrow--right {
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='1 1 3 2 1 3' stroke='%235a0038' stroke-width='.3' stroke-opacity='1' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
	cursor: var(--arrow) 40 40, auto;
}

.slider__nav-dots {
	margin-top: 55vh;
	max-height: 500px;
	display: inline-flex;
	position: relative;
	padding: 1em;
	pointer-events: none;
}

.slider__nav-dots::before {
	content: '';
	position: absolute;
	left: calc(1em + 1em + 2px);
	top: calc(1em + 2px);
	width: calc(1em - 2px * 2);
	height: calc(1em / 2 - 2px * 2);
	background-color: var(--ovgu-beere);
	transition: transform 0.7s ease-out;
	transform: translateX(calc((1em + 1em * 2) * (var(--from-left) - 1)));
}

body.dark-mode .slider__nav-dots::before {
	background-color: var(--ovgu-bordeaux);
}

.slider__nav-dot {
	margin: 0 1em;
	width: 1em;
	height: 0.5em;
	border: 2px solid rgba(255, 255, 255, 0.5);
	cursor: pointer;
	pointer-events: all;
	display: inline-block;
}

.slider__nav-dot:hover {
	border-color: rgba(255, 255, 255, 0.7);
}

.slider__nav-dot:active {
	border-color: rgba(255, 255, 255, 0.5);
}

/* Responsive Anpassungen */
@media only screen and (max-width: 650px) {
	.slider {
		max-height: 60vh;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Schatten beibehalten */
	}

	.slider::before,
	.slider::after {
		display: none;
	}

	.slider__content {
		width: 100vw;
		height: 100vh;
		max-height: 60vh;
	}

	.slider__text-item-info {
		bottom: 50%;
		left: 50%;
		transform: translate(-50%, 50%);
	}

	.slider__text-item-info p {
		padding: 1em .8em;
	}

	.slider__text-item-head {
		top: 5vh;
		left: 10vw;
		transform: translateZ(0);
	}

	.slider__text-item-head h3 {
		font-size: 2.5em;
	}

	.slider__nav-dots {
		background-color: rgba(0, 0, 0, 0.3);
		margin-top: 55vh;
	}

	.slider__nav-arrow {
		width: 10vw;
		position: relative;
		cursor: auto;
		max-height: 60vh;
	}

	.slider__nav-arrow:active {
		filter: brightness(0.5);
	}

	.slider__nav-arrow::before {
		content: '';
		background-image: var(--arrow);
		background-size: cover;
		width: 8vw;
		height: 8vw;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.slider__nav-arrow--left {
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, transparent 100%);
	}

	.slider__nav-arrow--left:active {
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0, transparent 100%);
	}

	.slider__nav-arrow--right {
		background-image: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0, transparent 100%);
	}

	.slider__nav-arrow--right:active {
		background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9) 0, transparent 100%);
	}
}

/* Ausblenden des Sliders fuer mittlere und kleine Bildschirme (unter 700px) */
@media (max-width: 700px) {
	.slider {
		display: none;
	}

	/* Abstand fuer den Inhalt anpassen, da der Slider ausgeblendet ist */
	.content-with-sidebar {
		margin-top: 0;
	}

	/* Artikel-Sektion mit etwas Abstand unter dem Header platzieren */
	.article-section {
		margin-top: 0;
		padding-top: 25px;
	}

	/* Artikel-Karten kompakter gestalten */
	.article-card {
		margin-bottom: 15px;
	}
}