.hero-slider-wrapper {
	display: flex;
	width: 100%;
	overflow: hidden;

	/*
	 * Falls der Slider eine feste oder minimale Höhe haben soll.
	 * Kann natürlich an dein bestehendes Layout angepasst werden.
	 */
	/* min-height: 500px; */
}


/* ---------------------------------------------------
   LOGOBEREICH
--------------------------------------------------- */

.hero-logo {
	position: relative;
	flex: 0 0 45%;
	max-width: 45%;

	align-items: center;
	justify-content: center;

	background: var(--bg-front-content);

	--angle-width: 280px;

	clip-path: polygon(
		0 0,
		100% 0,
		calc(100% - var(--angle-width)) 100%,
		0 100%
	);

	margin-right: calc(var(--angle-width) * -1);

	/* padding-right: calc(var(--angle-width) + 40px); */
	padding-right: calc(var(--angle-width) - 90px);

   padding-left: 10px;

    z-index: 2;
}


.hero-logo img {
    margin-top: -10%;
	width: 100%;
	max-width: 500px;
	height: auto;
}


/* ---------------------------------------------------
   FLEXSLIDER
--------------------------------------------------- */

.hero-slider {
	flex: 1 1 auto;
	min-width: 0;

	/*
	 * Standard-Margin des Flexsliders entfernen,
	 * sofern das bei dir noch aktiv ist.
	 */
	margin: 0;
	border: 0;
	border-radius: 0;
}


/*
 * Falls deine Slides Bilder enthalten, sollten diese
 * die verfügbare Fläche sauber ausfüllen.
 */
.hero-slider .slides,
.hero-slider .slides > li {
	height: 100%;
}


.hero-slider .slides img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}