:root {
	--padding-uploader: 50px;
}

.container.uploader {
	overflow: visible;
	
	padding-top: var(--padding-uploader);
	
	background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 79%, rgba(var(--color-2),1) 79%);
	
}

.uploadbox {
    display: flex;
    flex-direction: row;
    background: rgba(var(--color-2));
    border-radius: var(--radius);
    padding: 10px;
    gap: 20px; 
	width: 90%;
	
	-webkit-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.23);
box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.23);
	margin-bottom: 50px;
  }

.uploadbox h2 {
	font-size: 3.5vh;
}

  .column {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }  



  .column:nth-child(2) {
width: 50%;
  }

.uploadbox .headliner {
	padding-bottom: 25px;
}

.uploadbox .button-wrapper {
  margin-top: 35px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

/* Grundstil für beide Buttons */
.uploadbox .button-wrapper a {
  border: 2px solid var(--farbe-1);
  padding: 5px 20px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: inherit;
  height: 40px;
  transition: all 0.3s ease; /* sanfter Übergang */
  position: relative;
  overflow: hidden;
}

/* Erster Button: Standard-Hintergrund mit Farbe 1 */
.uploadbox .button-wrapper a:nth-child(1) {
  background: var(--farbe-1);
  color: #fff;
}

/* Hover-Effekt für den ersten Button */
.uploadbox .button-wrapper a:nth-child(1):hover {
  background: var(--farbe-2);
  border-color: var(--farbe-2);
}

/* Hover-Effekt für den zweiten Button */
.uploadbox .button-wrapper a:nth-child(2):hover {
  border-color: var(--farbe-2);
}



 .top-holder .image-holder {
       aspect-ratio: 15 / 16;
	     aspect-ratio: 16 / 9;
     margin-top: calc(-1 * var(--padding-uploader));
	 margin-right: -40%;
	 border-radius: var(--radius);
	  -webkit-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.23);
box-shadow: 0px 0px 54px -7px rgba(0,0,0,0.23);
	 
}

 .top-holder .image-holder a {
   width: 100%;
	 height: 100%;
}


 .top-holder .image-holder img {
   width: 100%;
	 height: 100%;
	 object-fit: cover;
	  border-radius: var(--radius);
}

  .bottom-holder {
   padding-top:25px;
mix-blend-mode: multiply !important;
  }


.uploadbox .swiper {
      width: 100%;
      height: 100%;
	position: relative;
	display: flex;
    }

.uploadbox  .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
	 border-radius: var(--radius);
    }

.uploadbox  .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
	object-position: left center; 
    }

.uploadSwiper .swiper-slide {
	position: relative;
}
.uploadSwiper .swiper-slide::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 30%;
	background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.7875350823923319) 0%, rgba(255,255,255,0) 100%);
	z-index: 2;
	bottom: 0;
	 border-radius: var(--radius);
}

.uploadSwiper .swiper-button-next{
	top:unset;
	bottom:30px;
	right: 20px;
	width: 50px;
	height: 50px;
}
.uploadSwiper .swiper-button-prev{
	top:unset;
	bottom:30px;
	left: 20px;
	width: 50px;
	height: 50px;
}


/* Logo-Slider (unten): Bild zentriert anzeigen */
.logoSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logoSwiper .swiper-slide img {
  width: auto;              /* nicht auf 100% stretchen */
  height: auto;             /* Höhe proportional */
  max-width: 100%;          /* nicht breiter als der Slide */
  max-height: 80px;         /* maximale Höhe anpassen – je nach gewünschter Größe */
  object-fit: contain;      /* komplette Grafik zeigen */
  object-position: center center;
}





@media only screen and (max-width: 767px) {
	
	:root {
	--padding-uploader: 0px;
}
	
	
	.container.uploader {
	overflow: visible;
	
	padding-top: var(--padding-uploader);
	
background: #FFF;
		padding-top:50px;
	
}
	
	
	.uploadbox {
		display: flex;
		flex-direction: column-reverse;
		width: calc(100% - var(--main-padding)) !important;
	}
	.top-holder .image-holder {
    margin-top: 0;
    margin-right: 0;
		 aspect-ratio: 16 / 9;
}

	
.column:nth-child(2) {
    width: calc(100% - 40px);
}
	
.uploadbox .button-wrapper {
    flex-direction: column;
}	
	
}