#wrapper .content-element-group.BildBisZumRand, #wrapper .content-text.BildBisZumRand, #wrapper .content-text.BildBisZurHälfte {
    @media(max-width:1023px){ 
        .content-image:nth-child(2) { margin-top: 20px; }
        .content-image:nth-child(1) { margin-bottom: 20px; }
    }
    @media(min-width:1024px){
        overflow: hidden;
        padding: 0;
		width: 100%;
		display: grid;
		align-items: center;
		grid-template-columns: 
			var(--content_margin) 
			1fr 
			calc( var(--content_width) / 2 - var(--content_margin) ) 
			calc( var(--content_width) / 2 - var(--content_margin) )
			1fr 
			var(--content_margin)
		;
        figure { float: none; }
		&:first-child,
		&:is(.BildBisZumRand, .BildBisZurHälfte) + :is(.BildBisZumRand, .BildBisZurHälfte) { margin-block-start: 0; }
        & > .rte { padding: var(--article_margin, 20px); }
		& > .rte, & > .content-element-group {
			padding: 0;
			grid-column: 3 / 4;
			grid-row: 1;
			margin-top: var(--article_margin);
			margin-bottom: var(--article_margin);
            &:nth-child(1) { margin-right: var(--image_margin); }
			.media--left &, &:nth-child(2):not(.rte) { 
                grid-column: 4 / 5; 
                margin-left: var(--image_margin);
            }
            .media--right & { margin-right: var(--image_margin); }
			.TextUnten & { align-self: end;  }
			.TextOben & { align-self: start; }
		}
		& > figure, & > .content-image {
            position: absolute;
			display: block;
            top: 0;
			width: 100%;
			height: 100%;
			grid-column: 4 / 7;
			grid-row: 1;
			.BildBisZurHälfte & { grid-column: 4 / 5; }
            & > figure {
                .BildInVollerHöhe & { height: 100%; }
            }
			.media--left &, &:nth-child(1):not(figure) { 
                grid-column: 1 / 4; 
                margin-right: 0;
				.BildBisZurHälfte & { grid-column: 3 / 4; }
            }
            .media--right & { margin-left: 0; }
			picture {
				display: block;
				height: 100%; 
				img { 
					width: 100%;
					height: 100%;
					object-fit: cover; 
				}
			}
		}
	}
}
.content-text.TextMittig {
	figure { float: none; }
	@media(min-width:1024px){
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		justify-items: center;
		& figure { 
			margin: 0;
			float: none;
			display: grid;
			align-content: center;
			.media--right & { grid-column: 2; }
		}
		.rte {
			display: grid;
			align-content: center;
			margin-top: 0;
			.media--left & { margin-left: var(--image_margin); }
			.media--right & { margin-right: var(--image_margin); grid-row: 1; }
		}
	}
}
.mod_article.TextAufBild {
	padding-top: 0;
	.content-image { padding: 0; }
	@media(min-width:1024px){
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		height: 600px;
		max-height: 100vh;
		&.Höhe200 { height: 200px; }
		&.Höhe300 { height: 300px; }
		&.Höhe400 { height: 400px; }
		&.Höhe500 { height: 500px; }
		&.Höhe600 { height: 600px; }
		&.Höhe700 { height: 700px; }
		&.Höhe800 { height: 800px; }
		&.Höhe900 { height: 900px; }
		&.Höhe1000 { height: 1000px; }
		.content-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			padding: 0;
			margin: 0;
			& figure {
				height: 100%;
				.BildOben-100 &, .BildUnten-100 & { height: calc( 100% + 100px ); }
				.BildOben-150 &, .BildUnten-150 & { height: calc( 100% + 150px ); }
				.BildOben-200 &, .BildUnten-200 & { height: calc( 100% + 200px ); }
				.BildOben-250 &, .BildUnten-250 & { height: calc( 100% + 250px ); }
				.BildOben-300 &, .BildUnten-300 & { height: calc( 100% + 300px ); }
				.BildOben-350 &, .BildUnten-350 & { height: calc( 100% + 350px ); }
				.BildOben-400 &, .BildUnten-400 & { height: calc( 100% + 400px ); }
				& img { 
					object-fit: cover;
					height: 100%;
					width: 100%;
					.BildUnten &, [class*=' BildUnten'] & { object-position: bottom; }
				}
			}
		}
		.content-text {
			margin-top: 0;
			height: 100%;
			display: grid;
			.TextMitHintergrund & { width: 100%; }
			.rte {
				align-self: end;
				justify-self: start;
				width: 100%;
				max-width: 100%; 
				margin-bottom: 50px;
				.TextOben & { align-self: center; margin-bottom: 0; margin-top: 50px; }
				.TextRechts & { justify-self: end; }
				.TextVertikalMittig & { align-self: center; margin-bottom: 0; }
				.TextHorizontalMittig & { justify-self: center; }
				.TextMitHintergrund & {
					background-image: linear-gradient(to left, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 1) 100%);
					height: calc(100% - 100px);
					margin: 40px 0px 50px -20px;
					padding: 60px;
					width: 600px;
					max-width: 100%;
				}
				.BreiteText50Prozent & { width: 50%; }
				.BreiteText300 & { width: 300px; }
				.BreiteText400 & { width: 400px; }
				.BreiteText500 & { width: 500px; }
				.BreiteText600 & { width: 600px; }
				.BreiteText700 & { width: 700px; }
				.BreiteText800 & { width: 800px; }
				.BreiteText900 & { width: 900px; }
				.BreiteText1000 & { width: 1000px; }
			}
		}
	}
}

.content-text.BildHinterText {
    figure, picture { display:contents; }
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }
}

.BildMittig {
    figure, picture { display:contents; }
    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }
}

.headline_left { 
    h1, h2, h3, h4, h5, h6 { text-align: left; width: 100%; }
}
.headline_center { 
    h1, h2, h3, h4, h5, h6 { text-align: center; width: 100%; }
}
.headline_right { 
    h1, h2, h3, h4, h5, h6 { text-align: right; width: 100%; }
}

.content-headline {
    &.headline_left { text-align: left; }
    &.headline_center { text-align: center; }
    &.headline_right { text-align: right; }
}
