/*
 * Swiper_XH
 * Frank Seidel, Olaf Penschke
 * Stylesheet for "set_frontpage"
 */
 
/* The following line is mandatory. Do not delete it! */

:root {
  --swiper-theme-color:white
}

/*@media (max-width:991px) {   
    .swiper-container {margin: -20px -12px 0px -12px;}  //reduce padding on mobile
}
*/

.swiper-container {
/*margin:  -35px -(@grid-gutter-width / 2)-35px 0px !important;	//top (left/right) bottom: */

	margin:  -40px -24.7% 40px -12.3% !important;
	max-width: 122%;  wg handheld */

}

.swiper-slide {
	width: 100% !important;
	max-width: 100vw;
/*	background-size: contain;
	background-repeat: no-repeat;
    aspect-ratio: 1.641 / 1;
    */
}

.swiper-slide h1 {
/* dont hyphenate */
  -webkit-hyphens: none;
     -moz-hyphens: none;
      -ms-hyphens: none;
       -o-hyphens: none;
          hyphens: none;
        word-wrap: normal;
}

.swiper-slide div:nth-of-type(1) img{
    width: 100%;
    height: auto;
}
.swiper-slide div:nth-of-type(2) {
	padding: 30px 47px 30px 30px;
	opacity: 0.95;
}
.swiper-slide div + div p a {color:inherit; font-weight:bold;}

.swiper-slide.slide1 div + div {
    background-color: rgb(225, 198, 59); /* gelb */
}

.swiper-slide.slide3 div + div {
    background-color: rgb(225, 198, 59); /* gelb */
}
.swiper-slide.slide4 div {
    background-color: rgb(88,152,185); /* blau */
}
.swiper-slide.slide5 div {
    background-color: rgba(142,184,130,1); /* grün */
}
/*.swiper-button-prev, .swiper-button-next {display:none;}*/


@media (min-width: 768px) {
    .swiper-container {
    	max-width: unset;
    }
    .swiper-slide div:nth-of-type(2) {
        position: absolute;
        width: 35%;
        aspect-ratio: 1;
        top: 60px;
        left: 60px;
        font-size: 12px;
    }
    .swiper-slide.slide5 div + div {
    	top: unset;
        left: unset;
        width: 27%;
        bottom: 7%;
        right: 4%;
        width: 27%;
    }
    .swiper-slide div:nth-of-type(2) h1 {
        font-size:18px;
    }
}
@media (min-width: 992px) {
    .swiper-slide div:nth-of-type(2) {
        top: 60px;
        left: 60px;
        font-size: 17px;
    }
    .swiper-slide div:nth-of-type(2) h1 {
        font-size:26px;
    }
}

@media (min-width: 1200px) {
    .swiper-slide div:nth-of-type(2) {
        top: 96px;
        left: 95px;
        font-size: 22px;    
    }
    .swiper-slide div:nth-of-type(2) h1 {
        font-size:34px;
    }
}

/* The following line is mandatory. Do not delete it! */