.backpic_Frame .backpic, .backpic_sideBySide_picHolder img  {-webkit-transition: all .75s cubic-bezier(.23,1,.32,1);-moz-transition: all .75s cubic-bezier(.23,1,.32,1);-ms-transition: all .75s cubic-bezier(.23,1,.32,1);-o-transition: all .75s cubic-bezier(.23,1,.32,1);transition: all .75s cubic-bezier(.23,1,.32,1);}
.backpic_Frame a:focus-visible {display: block}

/*Textausgabe*/
.backpic {position: relative; overflow: hidden;}
.backpic_Frame .layer, .backpic .layer {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.6)}
.backpic_Frame .layer .container, .backpic_Frame .layer .container .inside, .backpic .layer .container, .backpic .layer .container .inside {height: 100%}
.backpic_Frame .layer .container .inside, .backpic .layer .container .inside {display: flex; align-items: center; color: #fff}
.backpic .layer .container .inside.backpicTextCentered {justify-content: center} 

/*Hintergrundfarbe für Text*/
.layer.headPicTextBackground {background-color: rgba(0,0,0,0)}
.layer.headPicTextBackground .innerInside {padding: 2rem; background-color: var(--backPicBackColor); color: var(--black);border-radius: 4px}
.layer.headPicTextBackground .innerInside h1 {margin: 0 0 10px 0}

/*Copyright*/
/*
.backpic .copytextLayer {position: absolute; bottom: 0px; right: 0px; left: 10px; text-align: right; font-size: 14px; color: #fff;text-shadow: 2px 2px 5px rgba(0,0,0,0.4);z-index: 1}
.backpic .copytextLayer span {position: absolute;bottom: 0;right: -100%;z-index: 1;padding: 0.5em 0.75em;color: #fff;background: rgba(19, 24, 33, 0.5);border-radius: 0.25rem 0 0 0;backdrop-filter: blur(20px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1);}
.backpic .copytextLayer:before {color: #fff !important;background: rgba(19, 24, 33, 0.75) !important;position: absolute;bottom: 0.5rem;right: 0.5rem;z-index: 1;display: flex;align-items: center;justify-content: center;width: 1.5rem;height: 1.5rem;font-size: 1rem;line-height: 1.5rem;color: #131821;text-align: center;cursor: pointer;content: "\f1f9";font-family: "Font Awesome 5 Free";background: rgba(255, 255, 255, 0.5);border-radius: 10rem;backdrop-filter: blur(10px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1)}
.backpic .copytextLayer:hover span {opacity: 1;right: 0;}
.backpic .copytextLayer:hover:before {opacity: 0}
*/
/*Side by Side*/
.mod_article > .backpic_sideBySide {min-height: max(55vh, 550px);max-height: 550px}
.backpic_sideBySide, .backpic_sideBySide a {display: flex}
.backpic_sideBySide_picHolder {overflow: hidden; position: relative; display: inline-block;max-height: 100%;display: inline-block;}
.backpic_sideBySide_picHolder.SideBySideAsBackPic {height: 100%; display: block}

.backpic_sideBySide a:hover .backpic_sideBySide_picHolder img  {transform: scale(1.2)}
.backpic_sideBySide_pic {width: 63%; margin-left: -7%; position: relative; overflow: hidden;border-radius: 5px;align-self: center; max-height: 45vh; display: flex}
.backpic_sideBySide_pic.SideBySideAsBackPic {max-height: initial; display: initial}
.backpic_sideBySide_desc {width: 45%; padding: 2em 12% 2em 3em; border-radius: 5px;display: flex;align-items: center;}
.backpic_sideBySide_desc_inner {max-width: 100%}
.backpic_sideBySide a[target=_blank]:after {display: none}
.backpic_sideBySide_backPic {min-height: 46vh}


/*Verlinkung*/
.backpic_Frame.roundedBorderBK {border-radius: 0.75rem}
.backpic_Frame a[target=_blank]:after {display: none}
.backpic_Frame {overflow: hidden; position: relative}
.backpic_Frame:hover .backpic {transform: scale(1.2)}
.backpic_Frame .backpicLink {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.backpic_Frame:hover a.button {background-color: var(--red-hover)}

/*Baukommunikation Bild Flatterband*/
.backpic.roundedBorderBK {border-radius: 0.75rem}
.backpic.picFlutter {position: relative; background-color: var(--red)}
.backpic.picFlutter .picFlutterFrame {position: absolute;bottom: 0;height: 18px;width: 100%;background-color: var(--red)}
.backpic.picFlutter:after {background-color: white;content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 18px;mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 50'%3E%3Cpath fill='white' d='M112.097 7.0603c2.6038-2.6067.7577-7.0603-2.9267-7.0603H50.8115c-4.2594 0-8.3443 1.692-11.3561 4.7037L1.2183 42.9397c-2.6038 2.6066-.7577 7.0602 2.9267 7.0602h58.3588c4.2594 0 8.3443-1.692 11.3562-4.7037L112.097 7.0603Z'/%3E%3C/svg%3E");mask-repeat: repeat-x;mask-size: 58px 18px;-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 50'%3E%3Cpath fill='white' d='M112.097 7.0603c2.6038-2.6067.7577-7.0603-2.9267-7.0603H50.8115c-4.2594 0-8.3443 1.692-11.3561 4.7037L1.2183 42.9397c-2.6038 2.6066-.7577 7.0602 2.9267 7.0602h58.3588c4.2594 0 8.3443-1.692 11.3562-4.7037L112.097 7.0603Z'/%3E%3C/svg%3E");-webkit-mask-repeat: repeat-x;-webkit-mask-size: 58px 18px;}
/*.backpic.picFlutter:after {position: absolute;left: 0;bottom: 0;width: 100%;content: "";display: block;height: 17px;background-image: url("/files/sysImg/baukommunikation/flutter.svg");z-index: 9;background-repeat: repeat-x; transform: translateZ(0)}*/
.backpic.picFlutter .copytextLayer {bottom: 15px}

/*Baukommunikation Text Flatterband*/
.backpic.textFlutter .layer.headPicTextBackground .innerInside {position: relative;border-radius: 0.75rem;overflow: hidden}
.backpic.textFlutter .layer.headPicTextBackground .innerInside .textFlutterFrame {position: absolute;bottom: 0;height: 10px;left: 0; width: 100%;background-color: var(--red)}
.backpic.textFlutter .layer.headPicTextBackground .innerInside:after {background-color: white;content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 10px;mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 50'%3E%3Cpath fill='white' d='M112.097 7.0603c2.6038-2.6067.7577-7.0603-2.9267-7.0603H50.8115c-4.2594 0-8.3443 1.692-11.3561 4.7037L1.2183 42.9397c-2.6038 2.6066-.7577 7.0602 2.9267 7.0602h58.3588c4.2594 0 8.3443-1.692 11.3562-4.7037L112.097 7.0603Z'/%3E%3C/svg%3E");mask-repeat: repeat-x;mask-size: 32px 10px;-webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 50'%3E%3Cpath fill='white' d='M112.097 7.0603c2.6038-2.6067.7577-7.0603-2.9267-7.0603H50.8115c-4.2594 0-8.3443 1.692-11.3561 4.7037L1.2183 42.9397c-2.6038 2.6066-.7577 7.0602 2.9267 7.0602h58.3588c4.2594 0 8.3443-1.692 11.3562-4.7037L112.097 7.0603Z'/%3E%3C/svg%3E");-webkit-mask-repeat: repeat-x;-webkit-mask-size: 32px 10px;}

@media(max-width: 1350px)
{
	.backpic_sideBySide_desc {width: 57%;}
	.backpic_sideBySide_pic {width: 50%}
	.backpic_sideBySide_desc h1 {font-size: 2.4em}
	.backpic_sideBySide_desc .linebreak {white-space: initial}
}

@media(max-width: 950px)
{
	.mod_article > .backpic_sideBySide {height: initial; min-height: initial; max-height: initial}
	.backpic_sideBySide_backPic {min-height: 350px}
	.backpic_sideBySide.inside {margin: 0 auto;border-radius: 4.5px;}
	.backpic_sideBySide, .backpic_sideBySide a {flex-flow: column-reverse;height: auto;}
	.backpic_sideBySide_pic, .backpic_sideBySide_desc {width: 100%; margin: 0; border-radius: 0}
	.backpic_sideBySide_desc {padding: 3em}
	.backpic_sideBySide_pic	{top: 0; height: 100%}
	.backpic_sideBySide_pic img { border-radius: 0}	
	.backpic_sideBySide_desc {border-top-left-radius: 0;border-top-right-radius: 0}
}
@media(max-width: 768px)
{
	.backpic{height: 100% !important;min-height: 300px !important;background-attachment: initial !important;}
	.backpic .layer {/*position: initial;*/ padding: 6% 0;}
}