/* Dein Team – Positionierung (Section 12–20)
   3 Zonen: max-width:999px / 1025–1600px / min-width:1600px.
   Zone 1 (< 1000px) ist aktuell leer. */

h1, h2, h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h);
    letter-spacing: var(--letter-spacing-h);
    font-weight: var(--font-weight-a);
    color: var(--brand-primary);
    text-transform: uppercase;
    line-height: var(--line-height-h);
    margin-bottom: 0;
}

section h2 {
    margin-top: 0;
    margin-bottom: 0;
}

[class^="feld"] h2 + p {
    margin-top: 0;
    margin-bottom: 3em;
}

[class^="feld"] p {
    text-align: justify;
}
[class^="feld"] p.know-how {
    text-align: justify;
    color:var(--brand-olive);
    cursor:pointer;

}

/* ab 1025px, sectionübergreifend */
@media (min-width: 1000px) {
    .ausklapp p {
        width: 80%;
    }

    div.content .text .ausklapp p {
        text-align: left;
        width: 100%;
        hyphens: none;
    }
}


/* Section 12 – Larissa */

@media (max-width: 999px) {

	[class^="feld"] h2 + p {
    margin-top: 0;
    margin-bottom: 0em;
	}
    #section12 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        padding: 0rem var(--gutter);
    }
    #section12 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    /* Foto – behält Substanz bei 70% Breite statt volle Breite */
    #section12 .feld0 {
        width: 60%;
        margin: 0 auto 2rem 0;
        aspect-ratio: 544 / 733;
        background-size: cover;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section12 {
        margin-top: 5rem;
        z-index: 50;
    }
    #section12 .container {
        position: relative;
        aspect-ratio: 1862 / 1481;
        margin: 0 auto;
    }
    #section12 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section12 .feld0 {
        left: 0%;
        top: 0%;
        width: 29.2%;
        height: 49.5%;
        background-size: cover;
    }
    #section12 .feld1 {
        left: 34.8%;
        top: -0.8%;
        width: 40.1%;
        height: 12.3%;
    }
    #section12 .feld2 {
        left: 40.4%;
        top: 17.9%;
        width: 59.4%;
        height: 78.6%;
        z-index: 50;
    }
}

@media (min-width: 1600px) {
    #section12 {
        margin-top: 5rem;
        z-index: 50;
    }
    #section12 .container {
        position: relative;
        aspect-ratio: 1862 / 1481;
        margin: 0 auto;
    }
    #section12 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section12 .feld0 {
        left: 0%;
        top: 0%;
        width: 29.2%;
        height: 49.5%;
        background-size: cover;
    }
    #section12 .feld1 {
        left: 34.8%;
        top: -0.8%;
        width: 40.1%;
        height: 12.3%;
    }
    #section12 .feld2 {
        left: 40.4%;
        top: 17.9%;
        width: 59.4%;
        height: 78.6%;
        z-index: 50;
    }
}


/* Section 13 – Zitat */

#section13 .feld0 h1,
#section13 .feld0 p {
    color: var(--brand-wte);
}

@media (max-width: 500px) {

	#section13  {
	width:100%;
	padding-top:0;
	padding-bottom:0;
	}

    #section13 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0em 0;
        width:100%;
    }
    #section13 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section13 .feld0 {
        width: 100%;
        margin: 0 0 0 -10%;
        aspect-ratio: 959 / 906;
        padding:2.5rem 0 1.5rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-size:contain;
        background-position: center;
        background-repeat:no-repeat;
        background-size:100%;
        max-width:420px;
        
    }
}

@media (min-width: 500px) and (max-width: 999px) {

	#section13  {
	width:100%;
	padding-top:0;
	padding-bottom:0;
	}

    #section13 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0em 0;
        width:100%;
    }
    #section13 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section13 .feld0 {
        width: 100%;
        margin: 0 0 0 -5%;
        aspect-ratio: 959 / 906;
        padding:2.5rem 0 1.5rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-size:contain;
        background-position: center;
        background-repeat:no-repeat;
        background-size:100%;
        max-width:420px;
        
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section13 {
        padding-top: 0;
        padding-bottom: 0;
    }
    #section13 .container {
        position: relative;
        aspect-ratio: 1862 / 938;
        margin: 0 auto;
        margin-top: -400px;
    }
    #section13 .feld0 {
        position: absolute;
        left: -13.5%;
        top: 0.4%;
        width: 44.5%;
        height: 94.6%;
        padding: 4.5%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }


}

@media (min-width: 1600px) {
    #section13 {
        padding-top: 0;
        padding-bottom: 0;
    }
    #section13 .container {
        position: relative;
        aspect-ratio: 1862 / 938;
        margin: 0 auto;
        margin-top: -400px;
    }
    #section13 .feld0 {
        position: absolute;
        left: -24.5%;
        top: 0.4%;
        width: 51.5%;
        height: 96.6%;
        padding: 4.5%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}


/* Section 14 – Yvonne */

/* Überschrift + Rolle rechtsbündig */
#section14 .feld0 h2,
#section14 .feld0 h2 + p {
    text-align: right;
}
#section14 .feld0 h2 + p {
    margin-bottom: 3rem;
}
#section14 .feld0 h2,
#section14 .feld0 p {
    color: var(--brand-olive);
}

@media (max-width: 999px) {

#section14 .feld0 h2 + p {
    margin-bottom: 0rem;
}
    #section14 {
    	padding-bottom:5rem;
    	padding-top:5rem;
        background-size: 670% 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding-inline: var(--gutter);
        margin-top:-20%;
    }
    #section14 .feld0 {
    padding-top:3rem;
    }

    #section14 .feld0 h2,
    #section14 .feld0 h2 + p {
        text-align: left;
    }
    #section14 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 0;
    }
    #section14 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section14 .feld1 {
        width:60%;
        margin: 0 auto 0 0;
        aspect-ratio: 553 / 650;
        background-size: cover;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section14 {
        width: 100%;
        height: auto;
        aspect-ratio: 1862 / 1580;
        margin: 0 auto;
        margin-top: -200px;
        position: relative;
        background-size: 90% 100%;
        background-position: 120% 20%;
        background-repeat: no-repeat;
    }
    #section14 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1680;
        margin: 0 auto;
    }
    #section14 .feld0 {
        position: absolute;
        left: 23.4%;
        top: 24.2%;
        width: 35.5%;
        height: 48.4%;
    }
    #section14 .feld1 {
        position: absolute;
        left: 70.2%;
        top: 24.6%;
        width: 29.7%;
        height: 43.9%;
        background-size: cover;
        background-position: center;
    }

    #section14 .ausklapp p {
        width: 100%;
    }
}

@media (min-width: 1600px) {
    #section14 {
        width: 100%;
        height: auto;
        aspect-ratio: 1862 / 1580;
        margin: 0 auto;
        margin-top: -200px;
        position: relative;
        background-size: 90% 100%;
        background-position: 120% 20%;
        background-repeat: no-repeat;
    }
    #section14 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1680;
        margin: 0 auto;
    }
    #section14 .feld0 {
        position: absolute;
        left: 23.4%;
        top: 24.2%;
        width: 35.5%;
        height: 48.4%;
    }
    #section14 .feld1 {
        position: absolute;
        left: 70.2%;
        top: 24.6%;
        width: 29.7%;
        height: 43.9%;
        background-size: cover;
        background-position: center;
    }

    #section14 .ausklapp p {
        width: 100%;
    }
}


/* Section 15 – Christa */

#section15 .feld0 h2,
#section15 .feld0 h2 + p {
    text-align: right;
}
#section15 .feld0 h2 {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 999px) {

    #section15 {
        background-size: 90% 100%;
        background-position: 120% 20%;
        background-repeat: no-repeat;
    }
    #section15 .feld0 h2,
    #section15 .feld0 h2 + p {
        text-align: left!important;
    }
    #section15 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;

                padding: 0rem var(--gutter);
    }
    #section15 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section15 .feld1 {
        width: 60%;
        margin: 0 0 0 auto;
        aspect-ratio: 553 / 770;
        background-size: cover;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section15 {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding-top: 0;
        padding-bottom: 0;
        position: relative;
        background-size: 90% 100%;
        background-position: 120% 20%;
        background-repeat: no-repeat;
    }
    #section15 .container {
        position: relative;
        aspect-ratio: 1862 / 1000;
        margin: 0 auto;
    }
    #section15 .feld0 {
        position: absolute;
        left: 7.9%;
        top: -1.1%;
        width: 51.2%;
        height: 76.2%;
    }
    #section15 .feld1 {
        position: absolute;
        left: 70.2%;
        top: 0%;
        width: 29.7%;
        height: 73.7%;
        background-size: cover;
        background-position: center;
    }

    #section15 .ausklapp p {
        width: 100%;
    }
}

@media (min-width: 1600px) {
    #section15 {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding-top: 3rem;
        padding-bottom: 0;
        position: relative;
        background-size: 90% 100%;
        background-position: 120% 20%;
        background-repeat: no-repeat;
    }
    #section15 .container {
        position: relative;
        aspect-ratio: 1862 / 1000;
        margin: 0 auto;
    }
    #section15 .feld0 {
        position: absolute;
        left: 7.9%;
        top: -1.1%;
        width: 51.2%;
        height: 76.2%;
    }
    #section15 .feld1 {
        position: absolute;
        left: 70.2%;
        top: 0%;
        width: 29.7%;
        height: 73.7%;
        background-size: cover;
        background-position: center;
    }

    #section15 .ausklapp p {
        width: 100%;
    }
}


/* Section 16 – Carmen & Elke
   feld1/feld7 bleeden bewusst über den Container (>100% bzw. negativ). */

#section16 .feld6 {
    display: none; /* Duplikat, nicht im Layout */
}

#section16 .text h2,
#section16 .text p {
    color: var(--brand-wte);
}

#section16 .feld7 .text h2,
#section16 .feld7 .text p {
    color: var(--brand-primary);
}

@media (max-width: 999px) {
    #section16 {
        background-size:800% 80%;
        background-position: center;
        background-repeat: no-repeat;
    }

    #section16 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0rem var(--gutter) 0rem var(--gutter);
    }
    #section16 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }

 	#section16 .feld0 h2,
 	#section16 .feld0 p {
 		text-align:left!important;
 	}

    #section16 .feld1 { /* Carmen */
        width: 60%;
        margin: 0 auto 0 0;
        aspect-ratio: 497 / 671;
        background-size: cover;

    }
    #section16 .feld4 { /* Elke */
        width: 60%;
        margin: 2rem 0 0 auto;
        aspect-ratio: 514 / 680;
        background-size: cover;
    }
    #section16 .feld7 { /* Blob */
        width: 80%;
        margin: 0 auto;
        aspect-ratio: 888 / 509;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-size:contain;
        background-repeat:no-repeat;
    }

    #section16 div:not(.feld7) h2 {
    margin-top:1.8rem;
    }

    #section16 div.feld7 h2 {
    margin-top:0rem;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section16 {
        width: 100%;
        height: auto;
        position: relative;
        aspect-ratio: 2480 / 3261;
        background-size: 130% 100%;
        background-position: top;
        background-repeat: no-repeat;
        padding-bottom:9rem;
    }
    #section16 .container {
        position: relative;
        aspect-ratio: 1862 / 2000;
        margin: 0 auto;
    }
    #section16 .feld4 { /* Elke */
        position: absolute;
        left: 52.8%;
        top: 8%;
        width: 27.6%;
        height: 37.8%;
        background-size: cover;
        background-position: center;
    }
    #section16 .feld3 {
        position: absolute;
        left: 77.9%;
        top: 20.5%;
        width: 18%;
        height: 6.1%;
        z-index: 2;
    }
    #section16 .feld5 {
        position: absolute;
        left: 53.1%;
        top: 52.9%;
        width: 45.8%;
        height: 25.2%;
    }
    #section16 .feld1 { /* Carmen */
        position: absolute;
        left: 10.5%;
        top: 14.2%;
        width: 26.7%;
        height: 37.3%;
        background-size: cover;
        background-position: center;
    }
    #section16 .feld0 {
        position: absolute;
        left: -4.7%;
        top: 40.2%;
        width: 17.5%;
        height: 7.6%;
        text-align: right;
        z-index: 5;
    }
    #section16 .feld2 {
        position: absolute;
        left: 0.5%;
        top: 59.5%;
        width: 36.5%;
        height: 21.7%;
    }
    #section16 .feld7 { /* Blob, hier abweichend positioniert */
        position: absolute;
        left: 45.6%;
        top: 100.5%;
        width: 49.7%;
        height: 31.3%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #section16 .ausklapp p {
        width: 100%;
    }
}

@media (min-width: 1600px) {
    #section16 {
        width: 100%;
        height: auto;
        position: relative;
        aspect-ratio: 2480 / 2761;
        background-size: 105% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    #section16 .container {
        position: relative;
        aspect-ratio: 1862 / 1800;
        margin: 0 auto;
    }
	#section16 .feld4 { /* Elke */
        position: absolute;
        left: 52.8%;
        top: 13%;
        width: 27.6%;
        height: 37.8%;
        background-size: cover;
        background-position: center;
    }
    #section16 .feld3 {
        position: absolute;
        left: 76.9%;
        top: 19.5%;
        width: 18%;
        height: 6.1%;
        z-index: 2;
    }
    #section16 .feld5 {
        position: absolute;
        left: 53.1%;
        top: 58.9%;
        width: 45.8%;
        height: 25.2%;
    }
    #section16 .feld1 { /* Carmen */
        position: absolute;
        left: 7.5%;
        top: 18.2%;
        width: 26.7%;
        height: 37.3%;
        background-size: cover;
        background-position: center;
    }
    #section16 .feld0 {
        position: absolute;
        left: -7.7%;
        top: 44.2%;
        width: 17.5%;
        height: 7.6%;
        text-align: right;
        z-index: 5;
    }
    #section16 .feld2 {
        position: absolute;
        left: -2.5%;
        top: 63.5%;
        width: 36.5%;
        height: 21.7%;
    }
    #section16 .feld7 { /* Blob */
        position: absolute;
        left: 44.2%;
        top: 115%;
        width: 47.7%;
        height: 28.3%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #section16 .ausklapp p {
        width: 100%;
    }
}


/* Section 17 – Lena */

@media (max-width: 999px) {
    #section17 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0rem var(--gutter) 2rem var(--gutter);
    }
    #section17 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section17 .feld0 {
        width: 65%;
        margin: 0 auto 2rem 0;
        aspect-ratio: 495 / 692;
        background-size: cover;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section17 {
        padding-top: 0;
    }
    #section17 .container {
        position: relative;
        aspect-ratio: 1862 / 838;
        margin: 0 auto;
        padding-top: 0;
    }
    #section17 .feld0 {
        position: absolute;
        left: 2.3%;
        top: 0.3%;
        width: 26.6%;
        height: 82.6%;
        background-size: cover;
        background-position: center;
    }
    #section17 .feld1 {
        position: absolute;
        left: 33.3%;
        top: -1.4%;
        width: 20%;
        height: 15%;
    }
    #section17 .feld2 {
        position: absolute;
        left: 38.3%;
        top: 25.5%;
        width: 61.6%;
        height: 79.9%;
    }
}

@media (min-width: 1600px) {
    #section17 {
        padding-top: 0;
    }
    #section17 .container {
        position: relative;
        aspect-ratio: 1862 / 838;
        margin: 0 auto;
        padding-top: 0;
    }
    #section17 .feld0 {
        position: absolute;
        left: 2.3%;
        top: 0.3%;
        width: 26.6%;
        height: 82.6%;
        background-size: cover;
        background-position: center;
    }
    #section17 .feld1 {
        position: absolute;
        left: 33.3%;
        top: -1.4%;
        width: 20%;
        height: 15%;
    }
    #section17 .feld2 {
        position: absolute;
        left: 38.3%;
        top: 25.5%;
        width: 61.6%;
        height: 79.9%;
    }
}


/* Section 18 – VER TRAUE */

#section18 .feld1 h2 {
    font-size: var(--font-size-big);
    line-height: 1.05;
    margin: 0;
}

@media (max-width: 999px) {
    #section18 .container {
        container-type: inline-size;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0rem var(--gutter);
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
    }
    #section18 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section18 .feld0 {
        width: 84%;
        margin: 0 auto 0 auto;
        aspect-ratio: 2297 / 1477;
        background-size: cover;
    }
    #section18 .feld1 {
		margin-top:-17%;
	}
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section18 .container {
        container-type: inline-size;
        position: relative;
        aspect-ratio: 2297 / 1830;
        margin: 0 auto;
        width: calc(78% - 2 * var(--gutter));
        max-width: var(--container-max-width);
    }
    #section18 .feld0 {
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 80.7%;
        background-size: cover;
        background-position: center;
    }
    #section18 .feld1 {
        position: absolute;
        left: -6.6%;
        top: 75.5%;
        width: 50%;
        height: 25%;
    }
}

@media (min-width: 1600px) {
    #section18 .container {
        container-type: inline-size;
        position: relative;
        aspect-ratio: 2297 / 1830;
        margin: 0 auto;
        width: calc(78% - 2 * var(--gutter));
        max-width: var(--container-max-width);
    }
    #section18 .feld0 {
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 80.7%;
        background-size: cover;
        background-position: center;
    }
    #section18 .feld1 {
        position: absolute;
        left: -6.6%;
        top: 72.0%;
        width: 50%;
        height: 25%;
    }
}


/* Section 19 – Martina */

@media (max-width: 999px) {
    #section19 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0rem var(--gutter);
    }
    #section19 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section19 .feld2 {
        width: 65%;
        margin: 0 0 0 auto;
        aspect-ratio: 659 / 984;
        background-size: cover;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section19 .container {
        position: relative;
        aspect-ratio: 2297 / 1270;
        margin: 0 auto;
    }
    #section19 .feld0 {
        position: absolute;
        left: 0%;
        top: 20.2%;
        width: 55.1%;
        height: 61.1%;
    }
    #section19 .feld1 {
        position: absolute;
        left: 38.8%;
        top: -1.1%;
        width: 23.9%;
        height: 15.2%;
        text-align: right;
    }
    #section19 .feld2 {
        position: absolute;
        right: 0%;
        top: 0%;
        width: 28.7%;
        height: 77.5%;
        background-size: cover;
        background-position: center;
    }
}

@media (min-width: 1600px) {

	#section19 {
		padding-bottom:0%;
	}
    #section19 .container {
        position: relative;
        aspect-ratio: 2297 / 1270;
        margin: 0 auto;
    }
    #section19 .feld0 {
        position: absolute;
        left: 0%;
        top: 20.2%;
        width: 55.1%;
        height: 61.1%;
    }
    #section19 .feld1 {
        position: absolute;
        left: 38.8%;
        top: -1.1%;
        width: 23.9%;
        height: 15.2%;
        text-align: right;
    }
    #section19 .feld2 {
        position: absolute;
        right: 0%;
        top: 0%;
        width: 28.7%;
        height: 77.5%;
        background-size: cover;
        background-position: center;
    }
}


/* Section 20 – Sandra */

#section20 h2, #section20 div.text > p {
    color: var(--brand-olive);
    margin-top: 0;
    margin-bottom: 0;
}
#section20 h2, #section20 div.text  p {
color: var(--brand-olive);
}
@media (max-width: 999px) {
    #section20 {
        background-size:340% 100%;
        background-repeat: no-repeat;
        background-position: center top;
        margin-bottom:-50px;
        margin-top:50px;

    }
    #section20 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding: 0rem var(--gutter) 2rem var(--gutter);
    }
    #section20 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section20 .feld0 {
        width: 65%;
        margin: 30px auto 0 0;
        aspect-ratio: 632 / 939;
        background-size: cover;
    }

    #section20 .feld1 {
		margin-bottom: 30px
	}
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section20 {
        background-size: 86% 100%;
        background-repeat: no-repeat;
        background-position: left top;
        margin-bottom: -100px;
        z-index: 1;
    }
    #section20 .container {
        position: relative;
        aspect-ratio: 2478 / 1900;
        margin: 0 auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    #section20 .feld0 {
        position: absolute;
        left: 0.1%;
        top: 15.7%;
        width: 25.5%;
        height: 49.4%;
        background-size: cover;
        background-position: center;
    }
    #section20 .feld1 {
        position: absolute;
        left: 32%;
        top: 30.4%;
        width: 46.2%;
        height: 48.6%;
    }
}

@media (min-width: 1600px) {
    #section20 {
        background-size: 90%;
        background-repeat: no-repeat;
        background-position: left top;
        margin-bottom: -100px;
        z-index: 1;
    }
    #section20 .container {
        position: relative;
        aspect-ratio: 2478 / 1900;
        margin: 0 auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    #section20 .feld0 {
        position: absolute;
        left: 0.1%;
        top: 15.7%;
        width: 25.5%;
        height: 49.4%;
        background-size: cover;
        background-position: center;
    }
    #section20 .feld1 {
        position: absolute;
        left: 32%;
        top: 30.4%;
        width: 46.2%;
        height: 48.6%;
    }
}