.banner {
}

.banner .image {
    object-fit: cover;
    border-radius: 30px;
}

.banner .circles {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.banner [class^="circle"] {
    position: absolute;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: var(--color-white);
    opacity: 72%;
}

h1 span.bannerh3, h1 span.h3  {font-size: 16px;font-weight: 400;line-height: 1.3em;}

.bg-white-titelblock h1 span.h2{color: var(--color-black-2);}


@media all and (max-width: 767px) {
    /*-------------- Begin: Key visuals for mobile view ----------------------*/
    .banner.large .circle-1 {
        right: -15px;
        width: 60px;
        height: 60px;
    }

    .banner.large .circle-2 {
        right: -127px;
        width: 280px;
        height: 280px;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 48%, var(--color-white) 48.4%);
    }

    .banner.small .circle-1 {
        right: -15px;
        width: 60px;
        height: 60px;
    }

    .banner.small .circle-2 {
        right: -127px;
        width: 280px;
        height: 280px;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 48%, var(--color-white) 48.4%);
    }
	.banner [class^="circle"] {
    opacity: 32%;
}
    /*-------------- End: Key visuals for mobile view ----------------------*/

    .banner {
        width: 100%;
        margin: auto;
    }

    .banner > .col-12 {
        padding: 0;
    }

    .banner .content {
        bottom: 4%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 3%;
        max-width: 85%;
    }

    .banner .title {
        margin-bottom: 10px;
    }

    .banner .title-small {
        margin-bottom: 5px;
    }

    .banner .image {
        transform: scale(1.02);
        min-height: 224px;
        max-height: 224px;
    }

    .banner .title-small {
        margin-bottom: 10px;
    }
}

@media all and (min-width: 768px) {
    /*-------------- Begin: Key visuals for mobile view ----------------------*/
    .banner.large .circle-1 {
        right: -5.222vw;
        width: 23.975vw;
        height: 23.975vw;
    }

    .banner.large .circle-2 {
        width: 86.38vw;
        height: 86.38vw;
        right: -36.2vw;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 42%, var(--color-white) 42.2%);
    }

    .banner.small .circle-1 {
        width: 14.663vw;
        height: 14.663vw;
        right: -3.1vw;
    }

    .banner.small .circle-2 {
        width: 52.606vw;
        height: 52.606vw;
        right: -21.6vw;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 43%, var(--color-white) 43.4%);
    }
    /*-------------- End: Key visuals for mobile view ----------------------*/

    .banner.large .image {
        max-height: 810px;
    }

    .banner.small .image {
        max-height: 507px;
    }

    .banner .content {
        bottom: 20%;
        left: 8.5%;
        padding: 3.474%;
        max-width: 530px;
    }

    .banner .title {
        margin-bottom: 30px;
    }

    .banner .title-small {
        margin-bottom: 20px;
    }

    .banner .title-small + .title {
        margin-top: -10px;
    }

    .banner .text {
        margin-bottom: 30px;
    }
}

@media all and (min-width: 1440px) {
    /*-------------- Begin: Key visuals for mobile view ----------------------*/
    .banner.large .circle-1 {
        right: -75px;
        width: 345px;
        height: 345px;
    }

    .banner.large .circle-2 {
        right: -521px;
        width: 1243px;
        height: 1243px;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 42%, var(--color-white) 42.2%);
    }

    .banner.small .circle-1 {
        right: -45px;
        width: 211px;
        height: 211px;
    }

    .banner.small .circle-2 {
        right: -311px;
        width: 757px;
        height: 757px;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 43%, var(--color-white) 43.4%);
    }
    /*-------------- End: Key visuals for mobile view ----------------------*/
}

	.headerh2kleiner{font-size:20px;line-height:3em;}
	.headerh2mittel{font-size:30px;line-height:3em;}

	.bg-white-startseitentitelblock{background-color: #ffffff;}
	.bg-white-titelblock{background-color: #ffffff;}

@media all and (max-width: 1286px) {
	.bg-white-startseitentitelblock{background-color: rgba(255, 255, 255, .7);}
	.bg-white-startseitentitelblock h2{font-size:16px;line-height:1.3em;font-weight:600;color: var(--color-black-2);}
	.bg-white-startseitentitelblock h2.color-orange, .bg-white-startseitentitelblock h2.h5{font-size:18px;line-height:1.3em;color: var(--color-black-2);}
	
	.bg-white-titelblock{background-color: rgba(255, 255, 255, .7);}
	.bg-white-titelblock h1{color: var(--color-black-2);}
	.bg-white-titelblock h1 span.color-orange{font-size:14px;line-height:1.3em;font-weight:600;color: var(--color-black-2);}
	.bg-white-titelblock h1 span.h2{line-height:1.4em;color: var(--color-black-2);}

}