/* .content_block.downloads {
    z-index: 2;
} */
.content_block.downloads {
	position: relative;
    width: 100%;
}

.content_block.downloads .contents {
    width: 100%;
}

.content_block.downloads .download-images {
}
.content_block.downloads [data-layout=""] .download-wrapper.flexbox,
.content_block.downloads [data-layout="default"] .download-wrapper.flexbox {
    column-gap: calc(((100vw - var(--padding) * 2) - var(--gap) * 11) / 12 + var(--gap) * 2);
}


.content_block.downloads [data-layout=""] .download-images,
.content_block.downloads [data-layout="default"] .download-images {
	display:flex;
	flex-direction: row;
	gap: var(--gap);
    flex-wrap: wrap;
    max-width: 100%;
}


main#row_content>div.content_block.downloads:first-child {
    top: -10rem;
    bottom: -10rem;
}

.content_block.downloads a img {
    width: 100%;
}

.content_block.downloads > div {
    width: 100%;
    height: auto;
}

.content_block.downloads .download-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 1em;
    text-align: center;
    max-width: fit-content;
}

.content_block.downloads .h3 {
    font-weight: var(--bold, 700);
    display: block;
    line-height: 1.2;
}


.downloads-wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 50%;
}

.content_block.downloads .button {
    color: inherit;
}


.content_block.downloads [data-layout=""] .download-wrapper,
.content_block.downloads [data-layout="default"] .download-wrapper {
    background: linear-gradient(to top, var(--highlight), transparent);

}
.content_block.downloads [data-layout="default"] .download-wrapper {
    background: none;
}

.content_block.downloads [data-layout="box"] {
    display: flex;
    align-items: flex-end;
    gap: var(--gap);
    position: relative;
    z-index: 2;
    /* flex-wrap: wrap; */
    width: 100%;
}

.content_block.downloads [data-layout="box"] h2 {
    border: none;
    position: relative;
    /* width: 50%; */
}

.content_block.downloads [data-layout="box"] h2:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: calc(99vw - var(--padding) * 2);
    border-bottom: 2.75px solid var(--white);
}

.content_block.downloads [data-layout="box"] .download-wrapper {
    padding: 0;
    z-index: 2;
    position: relative;
    /* margin: 0 auto; */
}

.content_block.downloads [data-layout="box"] .download-item {
    width: auto;
    padding: 0;
    display: grid;
    align-self: flex-end;
    align-items: end;
}

.content_block.downloads [data-layout="box"] .download-item > * {
    grid-column-start: 1;
    grid-row-start: 1;
}

.content_block.downloads [data-layout="box"] .download-item > p {
    background-color: var(--highlight);
    padding: 1em;
    opacity: 0;
    transition: all .3s ease;
}

.content_block.downloads [data-layout="box"] .download-item:hover p {
    opacity: 1;
}




/* Neues CSS */

.content_block.downloads [data-layout="box"] h2:after {
    z-index: -1;
}

.content_block.downloads [data-layout="box"] {
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}






/* CSS ERGÄNZUNG BILD IM HG  */
.content_block.downloads .background {
    position: absolute;
	z-index:1;
    height: 100%;
    left: calc(-1 * var(--padding));
    /* right: calc(-1 * var(--padding)); */
    width: 100vw;
    top: 0;
    aspect-ratio: 3;
    max-width: 100vw;
    height: auto;
    /* bottom: -10rem; */
    /*top: 0;*/
    bottom: 10rem;
    mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0) 5%,
      rgba(0, 0, 0, 1) 25%,
      rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 5vw,
      rgba(0, 0, 0, 1) calc(100% - 5vw),
      rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;

    order: 1;
}

.content_block.downloads [data-layout="box"][data-text="yes"] .background {
	left: auto;
	right: calc(-3.4 * var(--padding));
	bottom:0;
	    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5vw, rgba(0, 0, 0, 1) calc(100% - 5vw), rgba(0, 0, 0, 0) 100%);
}
.content_block.downloads [data-layout="default"] .background {
    mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0) 25%,
        rgba(0, 0, 0, 1) 95%,
        rgba(0, 0, 0, 0) 100%),
      linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 5vw,
        rgba(0, 0, 0, 1) calc(100% - 5vw),
        rgba(0, 0, 0, 0) 100%);
	/*top: 10rem;*/
}

.content_block.downloads .background img {
  width: 100%;
  min-width: 100%;
  max-height: 100%;
  /* height: 100%; */
  height: auto;
  aspect-ratio: 2;
  max-height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}

    .content_block.downloads .contents {
      position: relative;
      z-index: 2;
      margin-top: 10rem;
      margin-bottom: 10rem;
    }

    .content_block.downloads .contents .lg_8 {
        flex-grow: 1;
    }
    .content_block.downloads [data-layout="box"] .contents {
		display: flex;
		align-items: flex-end;
		gap: var(--gap);
		position: relative;
		z-index: 2;
		/* flex-wrap: wrap; */
		width: 100%;
		/* align-items: flex-end; */
		justify-content: space-between;
		align-items: start;
		flex-wrap: wrap;
		flex-direction: row-reverse;
		
	
		  flex-direction: column-reverse;
		  align-items: flex-end;
		  gap: 0;
		  width: 100%;
		  
		  .download-wrapper {
				  margin-top: -10vh;
		  }
	  
	  .download-wrapper .download-images {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: var(--gap);
		padding-left: 0;
	  }
	  &:not[.wtext] .download-wrapper .download-images {
		padding-left: 3.25rem;
	  }
    }


.content_block.downloads [data-layout="box"] .contents:not(.wtext) h2 {
    /*margin-top: -15rem;*/
}



.content_block.downloads div[data-layout="box"] .wtext {
    margin-top: 0;
    margin-bottom: 0;

    display: flex;
        flex-direction: row-reverse;
    align-items: flex-end;
    gap: 0;
}

/* CSS ERGÄNZUNG BILD IM HG ENDE  */


@media (pointer: coarse) {
  .content_block.downloads [data-layout="box"] .download-item > p {
    opacity: 1;
  }
}

@media screen and (min-width: 1081px) {
    .content_block.downloads [data-layout="box"] .contents.flexbox {
        flex-direction: row;
    }

    .content_block.downloads [data-layout="box"] .contents.flexbox.wtext {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gap)
    }

    .content_block.downloads [data-layout="box"] .contents.flexbox.wtext > * {
        grid-column-end: span 8;
    }

    .content_block.downloads [data-layout="box"] .contents.flexbox.wtext > .download-wrapper {
        grid-row-end: span 2;
        grid-column-end: span 4;
        width: 100%;
        align-self: flex-start;
    }

    .content_block.downloads [data-layout="box"] .contents.flexbox.wtext h2 {
        width: auto;
    }

    .content_block.downloads [data-layout="box"] .contents:not(.wtext) h2 {
        margin-top: 0;
    }

    .content_block.downloads .download-wrapper.lg_12 .download-images.lg_4 img,
    .content_block.downloads .download-wrapper.lg_4 .download-images.lg_12 img {
        height: auto;
        width: calc((100% - var(--gap)) / 2);
    }


    .content_block.downloads .download-wrapper.lg_12 .download-images.lg_12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }


    .content_block.downloads .download-wrapper.lg_12 .download-images.lg_12 img {
        height: auto;
        grid-column-end: span 2;
    }
}

@media screen and (max-width: 1080px) {
    .content_block.downloads,
    .content_block.downloads [data-layout="box"],
    .content_block.downloads [data-layout="box"] .contents,
    .content_block.downloads div[data-layout="box"] .wtext {
        flex-direction: column;
        gap: var(--gap)
    }

    .content_block.downloads .download-images,
    .content_block.downloads [data-layout="box"] .contents .download-wrapper .download-images,
    .content_block.downloads [data-layout=""] .download-images,
    .content_block.downloads [data-layout="default"] .download-images {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        width: 100%;
    }
    

    .content_block.downloads .contents,
    .content_block.downloads [data-layout="box"] .contents > *,
    .content_block.downloads [data-layout="box"] .contents .download-wrapper  {
        width: 100%;
        margin: 0;
    }

    .content_block.downloads .background {
        position: relative;
        order: 0;
    }
	
	.content_block.downloads [data-layout="box"][data-text="yes"] .background {
		left: calc(-1 * var(--padding));
		right: auto;
	}
	
	
	main#row_content>div.content_block.downloads:first-child {
		top: 0;
	}

}