.content-text.media::after {
	content: "";
	display: block;
	clear: both;
}
.content-text.media p:before {
	content: "";
	width: 10em;
	display: block;
	overflow: hidden;
}
.content-text.media--left figure { 
	float: left; 
	margin-right: var(--image_margin);
	@media(max-width:767px){  
		float: none;
		margin-right: 0;
		margin-bottom: 1em;
	}
}
.content-text.media--right figure { 
	float: right; 
	margin-left: var(--image_margin);
	@media(max-width:767px){  
		float: none;
		margin-left: 0;
		margin-bottom: 1em;
	}
}
.content-text.media--left, .content-text.media--right {
	& img {
		max-width: 100%;
		@media(max-width:767px){ height: auto; }
	}
}
.content-text.media.media--below.content-text figure.second_image { order: 3; }
.content-text.media--above > figure { margin-bottom: 30px; }
.content-text.media--below > figure { margin-top: 30px; }
.rte ul { 
	margin-bottom: 1em;
	&:last-child { margin-bottom: 0; }
}
/************************************************************* BUTTON *************************************************************/
:root {
	--button_border_color: var(--color_1, #000);
	--button_border_width: 1px;
	--button_border_radius: var(--border_radius, .25em);
	--button_font_color: var(--color_1, #000);
	--button_hover_font_color: #fff;
	--button_background_color: transparent;
	--button_hover_background_color: var(--color_1, transparent);
	--button_padding: .25rem 2rem;
	--button_font_size: 1em;
}
html body .content-text {
	&.ButtongrößeL { --button_padding: 1rem 5rem; }
	&.ButtonschriftL { --button_font_size: 1.3em; }
	&.ButtonrahmenL { --button_border_width: 2px; }
	&.ButtonrahmenXL { --button_border_width: 4px; }

	&.Buttonhintergrundfarbe {
		--button_font_color: #fff;
		--button_hover_font_color: var(--color_1, #000);
		--button_background_color: var(--color_1, transparent);
		--button_hover_background_color: transparent;
	}
	
	&.LinkAlsButton2, &.fettAlsButton2, &.kursiverLinkAlsButton2 {
		--button_border_color: var(--color_2, #000);
		--button_font_color: var(--color_2, #fff);
		--button_hover_background_color: var(--color_2, transparent);

		&.Buttonhintergrundfarbe {
			--button_font_color: #fff;
			--button_hover_font_color: var(--color_2, #000);
			--button_background_color: var(--color_2, transparent);
			--button_hover_background_color: transparent;
		}
	}

	&.Buttonschriftfarbe1 p { --button_font_color: var(--color_1, #000); }
	&.Buttonschriftfarbe2 p { --button_font_color: var(--color_2, #000); }
	&.Buttonschriftfarbe3 p { --button_font_color: var(--color_3, #000); }
	&.Buttonschriftfarbe4 p { --button_font_color: var(--color_4, #000); }
	&.ButtonschriftfarbeWeiß p { --button_font_color: #fff; }
	&.ButtonschriftfarbeSchwarz p { --button_font_color: #000; }
	&.ButtonschriftfarbeGrau p { --button_font_color: #444; }
	
	&.Buttonhoverschriftfarbe1 a { --button_hover_font_color: var(--color_1, #000); }
	&.Buttonhoverschriftfarbe2 a { --button_hover_font_color: var(--color_2, #000); }
	&.Buttonhoverschriftfarbe3 a { --button_hover_font_color: var(--color_3, #000); }
	&.Buttonhoverschriftfarbe4 a { --button_hover_font_color: var(--color_4, #000); }
	&.ButtonhoverschriftfarbeWeiß a { --button_hover_font_color: #fff; }
	&.ButtonhoverschriftfarbeSchwarz a { --button_hover_font_color: #000; }
	&.ButtonhoverschriftfarbeGrau a { --button_hover_font_color: #f8f8f8; }

	&.LinkAlsButton, &.LinkAlsButton2, &.kursiverLinkAlsButton, &.kursiverLinkAlsButton2, &.fettAlsButton, &.fettAlsButton2 { 
		position: relative;
		&:not(.kursiverLinkAlsButton) .rte strong a,
		&:not(.kursiverLinkAlsButton) .rte a strong { font-weight: var(--font_width_strong); }
		&:not(.kursiverLinkAlsButton) .rte a, 
		&:not(.LinkAlsButton) .rte em a,
		&:not(.LinkAlsButton) .rte a em,
		&.fettAlsButton .rte strong { 
			border: var(--button_border_width) solid var(--button_border_color);
			color: var(--button_font_color);
			background: var(--button_background_color);
			cursor: pointer;
			display: inline-block;
			font-style: normal; 
			font-size: var(--button_font_size);
			border-radius: var(--button_border_radius);
			text-decoration: none; 
			padding: var(--button_padding);
			line-height: 1.4;
			transition: all 0.25s ease-in-out;
			svg, svg.icon { 
				fill: var(--button_font_color); 
				transition: all 0.25s ease-in-out;
			}
			&:before { display: none; }
			&:hover { 
				background: var(--button_hover_background_color);
				color: var(--button_hover_font_color);
				svg, svg.icon { fill: var(--button_hover_font_color); }
			}
    	}
	}
}
/************************************************************* POSITIONS *************************************************************/
.mod_article:has(.BildBisZumRand), .mod_article:has(.BildBisZurHälfte) { 
	@media(min-width:1024px){ padding: 0; }
}
#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;
        figure { float: none; }
        & > .rte { padding: var(--article_margin, 20px); }
        padding: 0;
		width: 100%;
		display: grid;
		align-items: center;
		grid-template-columns: 
			var(--content_margin) 
			1fr 
			calc( var(--content_width) / 2 ) 
			calc( var(--content_width) / 2 ) 
			1fr 
			var(--content_margin)
		;
		& > .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-rows: 1fr;
		justify-items: center;
		grid-template-columns: auto auto;
		&.media--right { grid-template-columns: 1fr auto; }
		&.media--left { grid-template-columns: auto 1fr; }
		& figure { 
			margin: 0;
			float: none;
			display: grid;
			align-content: center;
			.media--right & { grid-column: 2; }
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.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; }
			}
		}
	}
}
.BildMittig {
    figure, picture { display:contents; }
    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }
}
.content-text.keinTextUnterDemBild {
    display: grid;
    &.media--left { grid-template-columns: auto 1fr; }
    &.media--right { grid-template-columns: 1fr auto; }
    figure { float: none; }
}
.ÜberschriftMittig > :is(h1, h2, h3, h4, h5, h6),
.ÜberschriftMittig:is(h1, h2, h3, h4, h5, h6) { text-align: center; }
/************************************************************* Bildtransparents *************************************************************/
.Bildtransparents01 img { opacity: 0.01; }
.Bildtransparents02 img { opacity: 0.02; }
.Bildtransparents03 img { opacity: 0.03; }
.Bildtransparents04 img { opacity: 0.04; }
.Bildtransparents05 img { opacity: 0.05; }
.Bildtransparents06 img { opacity: 0.06; }
.Bildtransparents07 img { opacity: 0.07; }
.Bildtransparents08 img { opacity: 0.08; }
.Bildtransparents09 img { opacity: 0.09; }
.Bildtransparents10 img { opacity: 0.1; }
.Bildtransparents15 img { opacity: 0.15; }
.Bildtransparents20 img { opacity: 0.2; }
.Bildtransparents25 img { opacity: 0.25; }
.Bildtransparents30 img { opacity: 0.3; }
.Bildtransparents35 img { opacity: 0.35; }
.Bildtransparents40 img { opacity: 0.4; }
.Bildtransparents45 img { opacity: 0.45; }
.Bildtransparents50 img { opacity: 0.5; }
.Bildtransparents55 img { opacity: 0.55; }
.Bildtransparents60 img { opacity: 0.6; }
.Bildtransparents65 img { opacity: 0.65; }
.Bildtransparents70 img { opacity: 0.7; }
.Bildtransparents75 img { opacity: 0.75; }
.Bildtransparents80 img { opacity: 0.8; }
.Bildtransparents85 img { opacity: 0.85; }
.Bildtransparents90 img { opacity: 0.9; }
.Bildtransparents91 img { opacity: 0.91; }
.Bildtransparents92 img { opacity: 0.92; }
.Bildtransparents93 img { opacity: 0.93; }
.Bildtransparents94 img { opacity: 0.94; }
.Bildtransparents95 img { opacity: 0.95; }
.Bildtransparents96 img { opacity: 0.96; }
.Bildtransparents97 img { opacity: 0.97; }
.Bildtransparents98 img { opacity: 0.98; }
.Bildtransparents99 img { opacity: 0.99; }
/************************************************************* BUTTON *************************************************************/
.BildDrehen5Grad img { rotate: 5deg; }
.BildDrehen10Grad img { rotate: 10deg; }
.BildDrehen15Grad img { rotate: 15deg; }
.BildDrehen20Grad img { rotate: 20deg; }
.BildDrehen25Grad img { rotate: 25deg; }
.BildDrehen30Grad img { rotate: 30deg; }
.BildDrehen35Grad img { rotate: 35deg; }
.BildDrehen40Grad img { rotate: 40deg; }
.BildDrehen45Grad img { rotate: 45deg; }
.BildDrehen50Grad img { rotate: 50deg; }
.BildDrehen55Grad img { rotate: 55deg; }
.BildDrehen60Grad img { rotate: 60deg; }
.BildDrehen65Grad img { rotate: 65deg; }
.BildDrehen70Grad img { rotate: 70deg; }
.BildDrehen75Grad img { rotate: 75deg; }
.BildDrehen80Grad img { rotate: 80deg; }
.BildDrehen85Grad img { rotate: 85deg; }
.BildDrehen90Grad img { rotate: 90deg; }
.BildDrehen95Grad img { rotate: 95deg; }
.BildDrehen100Grad img { rotate: 100deg; }
.BildDrehen105Grad img { rotate: 105deg; }
.BildDrehen110Grad img { rotate: 110deg; }
.BildDrehen115Grad img { rotate: 115deg; }
.BildDrehen120Grad img { rotate: 120deg; }
.BildDrehen125Grad img { rotate: 125deg; }
.BildDrehen130Grad img { rotate: 130deg; }
.BildDrehen135Grad img { rotate: 135deg; }
.BildDrehen140Grad img { rotate: 140deg; }
.BildDrehen145Grad img { rotate: 145deg; }
.BildDrehen150Grad img { rotate: 150deg; }
.BildDrehen155Grad img { rotate: 155deg; }
.BildDrehen160Grad img { rotate: 160deg; }
.BildDrehen165Grad img { rotate: 165deg; }
.BildDrehen170Grad img { rotate: 170deg; }
.BildDrehen175Grad img { rotate: 175deg; }
.BildDrehen180Grad img { rotate: 180deg; }
.BildDrehen-5Grad img { rotate: -5deg; }
.BildDrehen-10Grad img { rotate: -10deg; }
.BildDrehen-15Grad img { rotate: -15deg; }
.BildDrehen-20Grad img { rotate: -20deg; }
.BildDrehen-25Grad img { rotate: -25deg; }
.BildDrehen-30Grad img { rotate: -30deg; }
.BildDrehen-35Grad img { rotate: -35deg; }
.BildDrehen-40Grad img { rotate: -40deg; }
.BildDrehen-45Grad img { rotate: -45deg; }
.BildDrehen-50Grad img { rotate: -50deg; }
.BildDrehen-55Grad img { rotate: -55deg; }
.BildDrehen-60Grad img { rotate: -60deg; }
.BildDrehen-65Grad img { rotate: -65deg; }
.BildDrehen-70Grad img { rotate: -70deg; }
.BildDrehen-75Grad img { rotate: -75deg; }
.BildDrehen-80Grad img { rotate: -80deg; }
.BildDrehen-85Grad img { rotate: -85deg; }
.BildDrehen-90Grad img { rotate: -90deg; }
.BildDrehen-95Grad img { rotate: -95deg; }
.BildDrehen-100Grad img { rotate: -100deg; }
.BildDrehen-105Grad img { rotate: -105deg; }
.BildDrehen-110Grad img { rotate: -110deg; }
.BildDrehen-115Grad img { rotate: -115deg; }
.BildDrehen-120Grad img { rotate: -120deg; }
.BildDrehen-125Grad img { rotate: -125deg; }
.BildDrehen-130Grad img { rotate: -130deg; }
.BildDrehen-135Grad img { rotate: -135deg; }
.BildDrehen-140Grad img { rotate: -140deg; }
.BildDrehen-145Grad img { rotate: -145deg; }
.BildDrehen-150Grad img { rotate: -150deg; }
.BildDrehen-155Grad img { rotate: -155deg; }
.BildDrehen-160Grad img { rotate: -160deg; }
.BildDrehen-165Grad img { rotate: -165deg; }
.BildDrehen-170Grad img { rotate: -170deg; }
.BildDrehen-175Grad img { rotate: -175deg; }
.BildDrehen-180Grad img { rotate: -180deg; }