/* Wellness & Reisen – Positionierung (Section 4–6)
   3 Zonen: max-width:999px / 1000–1600px / min-width:1600px. */


/* ==========================================================================
   Grundlagen: Bild-Felder mit JPG-Hintergrund (section- & zonenübergreifend)
   ========================================================================== */
#section4 .feld2,
#section4 .feld3,
#section4 .feld4,
#section5 .zweispaltig .feld0,
#section6 .feld1,
#section6 .feld2,
#section6 .feld3,
#section6 .feld4 {
    background-repeat: no-repeat;
    background-size: cover;
}


/* ==========================================================================
   Section 4 – Hauptcontainer (Absolute Basis)
   Referenzmaße Desktop-Layout: 1200px x 1450px
   ========================================================================== */

#section4 .feld1 h1 {
    color: var(--brand-wte);
}

@media (max-width: 999px) {

	

    #section4 .container.freisetzend {
        aspect-ratio: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;

    }

    #section4 .feld0,
    #section4 .feld5 {
        position: static;
        width: 100%;
        height: auto;
    }

    #section4 .feld1 {
        position: static;
        width: 55%;
        height: auto;
        margin: 0 auto 0 0;
        aspect-ratio: 1 / 1.2;
        background-repeat: no-repeat;
        padding-left:1.9rem;
        padding-top:1.5rem;
        margin-bottom:-50px;
        margin-left:-1rem;
        z-index:5;
    }

    #section4 .feld2 {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 828 / 441;
    }

    #section4 .feld3 {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 429 / 544;
    }

    #section4 .feld4 {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 403 / 226;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section4 .container.freisetzend {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 2087 / 2350; /* 1200px Breite : 1450px Höhe */
        margin: 0 auto;
    }

    #section4 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Feld 0: Der obere Text rechts */
    #section4 .feld0 {
        top: 0%;
        right: 0%;
        width: 55%;
        height: auto;
    }

    /* Feld 1: Das braune SVG-Element links */
    #section4 .feld1 {
        top: 14.34%;
        left: 7%;
        width: 32%;
        height: 33%;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
    }

    /* Feld 2: Das große mittlere Querformat-Bild */
    #section4 .feld2 {
        top: 29%;
        right: 0%;
        width: 63.7%;
        height: 27.59%;
    }

    /* Feld 3: Das hochkant beschnittene Bild unten links */
    #section4 .feld3 {
        top: 51%;
        left: 0%;
        width: 33%;
        height: 34%;
    }

    /* Feld 4: Das schräge Bild unten rechts im Vordergrund */
    #section4 .feld4 {
        top: 65.7%;
        right: 16.00%;
        width: 33%;
        height: 15.00%;
        z-index: 10;
    }

    /* Feld 5: Der untere Abschlusstext */
    #section4 .feld5 {
        bottom: 2%;
        right: 0%;
        width: 55%;
        height: auto;
    }
}

@media (min-width: 1600px) {
    #section4 .container.freisetzend {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 2087 / 2350;
        margin: 0 auto;
        
    }

    #section4 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }

    #section4 .feld0 {
        top: 0%;
        right: 0%;
        width: 55%;
        height: auto;
    }

    #section4 .feld1 {
        top: 14.34%;
        left: 7%;
        width: 32%;
        height: 33%;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
    }

    #section4 .feld2 {
        top: 29%;
        right: 0%;
        width: 63.7%;
        height: 27.59%;
    }

    #section4 .feld3 {
        top: 51%;
        left: 0%;
        width: 33%;
        height: 34%;
    }

    #section4 .feld4 {
        top: 65.7%;
        right: 16.00%;
        width: 33%;
        height: 15.00%;
        z-index: 10;
    }

    #section4 .feld5 {
        bottom: 2%;
        right: 0%;
        width: 55%;
        height: auto;
    }
}


/* ==========================================================================
   Section 5 – "Ankommen statt erreichen"
   containermitrand (Grundlagen aus default.css) + Layout-Variante "zweispaltig":
   links Bild (feld0), rechts Text (feld1) auf olivfarbenem SVG-Hintergrund.
   ========================================================================== */

#section5.containermitrand {
    background-repeat: no-repeat;
}

#section5 .container.zweispaltig {
    display: flex;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#section5 .zweispaltig .feld0 {
    background-position: center;
}

#section5 .zweispaltig .feld1 {
    color: var(--brand-wte);
}

#section5 .zweispaltig .feld1 .text h2 {
    color: var(--brand-wte);
    margin: 0 0 1.5rem;
}

#section5 .zweispaltig .feld1 .text p {
    color: var(--brand-wte);
    line-height: var(--line-height-p);
    margin: 0;
}

@media (max-width: 999px) {
    #section5 {
        aspect-ratio: 375 / 600;
    }
	#section5 {
		padding-bottom:0;
		padding-top:0;
	}
    #section5 .container.zweispaltig {
        flex-direction: column;
        gap: 3rem;
    }

    #section5 .zweispaltig .feld1 {
        flex: 1 1 100%;
        width: 100%;
    }

    #section5 .zweispaltig .feld0 {
        flex: 1 1 100%;
        width: 100%;
        margin: 0 auto;
        aspect-ratio: 4 / 3.4;
    }

    #section5.containermitrand {
        background-image: url('/media/ankommen-mobil.svg') !important;
        background-size:100%;
        background-position: center;
        
        padding-bottom: 1rem;
        padding-top:0rem;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section5.containermitrand {
        background-size: contain;
        background-position: center;
    }

    #section5 .container.zweispaltig {
        gap: clamp(2rem, 5vw, 4rem);
    }

    #section5 .zweispaltig .feld0 {
        flex: 1 1 45%;
        aspect-ratio: 4 / 3.4;
    }

    #section5 .zweispaltig .feld1 {
        flex: 1 1 45%;
    }
}

@media (min-width: 1600px) {
    #section5.containermitrand {
        background-size: contain;
        background-position: center;
    }

    #section5 .container.zweispaltig {
        gap: clamp(2rem, 5vw, 4rem);
    }

    #section5 .zweispaltig .feld0 {
        flex: 1 1 45%;
        aspect-ratio: 4 / 3.4;
    }

    #section5 .zweispaltig .feld1 {
        flex: 1 1 45%;
    }
}


/* ==========================================================================
   Section 6 – Hauptcontainer (Absolute Basis, Variante "zweispaltig")
   Referenzmaße Desktop-Layout ca. 786px x 924px
   ========================================================================== */

#section6 .container.zweispaltig {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--container-max-width);
    margin-inline: auto;
}

#section6 .feld1,
#section6 .feld2,
#section6 .feld3,
#section6 .feld4 {
    background-position: center;
}

@media (max-width: 999px) {
	
	#section6 {
		padding-top:0;
	
	}

    #section6 .container.zweispaltig {
        aspect-ratio: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 var(--gutter);
    }

    #section6 .feld0,
    #section6 .feld5 {
        position: static;
        width: 100%;
        height: auto;
    }

    #section6 .feld0 {
        flex-direction: row;
        justify-content: space-between;
        gap: 0rem;
    }
    #section6 .feld0 h2:first-of-type {
		margin-bottom:0;
	
	}
	#section6 .feld0 h2:last-of-type {
		margin-top:0;
	
	}
    #section6 .feld1 {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 788 / 523;
    }

    #section6 .feld2 {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 311 / 468;
    }

    #section6 .feld3 {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 469 / 310;
    }

    #section6 .feld4 {
        position: static;
        width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 328 / 494;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section6 .container.zweispaltig {
        aspect-ratio: 786 / 924;
    }

    #section6 [class^="feld"] {
        position: absolute;
    }

    /* Feld 0: Textblock "Mehr Spueren" / "Mehr Sein", oben links */
    #section6 .feld0 {
        top: 1.2%;
        left: 30.7%;
        width: 22%;
        height: 22%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 5;
    }

    #section6 .feld0 .text h2 {
        margin: 0;
    }

    #section6 .feld0 .text h2:first-child {
        margin-bottom: 50px;
    }

    /* Feld 1: großes Foto oben rechts (Backbend) */
    #section6 .feld1 {
        top: 8%;
        right: 0%;
        width: 60.6%;
        height: 34.2%;
    }

    /* Feld 2: Foto Mitte (kniender Mann + Frau) */
    #section6 .feld2 {
        top: 45.6%;
        left: 39.3%;
        width: 23.9%;
        height: 30.6%;
    }

    /* Feld 3: Foto unten links (sitzende Dehnung) */
    #section6 .feld3 {
        top: 35.5%;
        left: 0%;
        width: 36.1%;
        height: 20.3%;
    }

    /* Feld 4: Foto Spiegel/Kerze, unten links */
    #section6 .feld4 {
        top: 65%;
        left: 4.8%;
        width: 25.2%;
        height: 32.3%;
    }

    /* Feld 5: Abschlusstext unten rechts */
    #section6 .feld5 {
        top: 81.7%;
        right: 0%;
        width: 53.2%;
        height: auto;
    }
}

@media (min-width: 1600px) {
    #section6 .container.zweispaltig {
        aspect-ratio: 786 / 924;
    }

    #section6 [class^="feld"] {
        position: absolute;
    }

    #section6 .feld0 {
        top: 1.2%;
        left: 30.7%;
        width: 22%;
        height: 22%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 5;
    }

    #section6 .feld0 .text h2 {
        margin: 0;
    }

    #section6 .feld0 .text h2:first-child {
        margin-bottom: 50px;
    }

    #section6 .feld1 {
        top: 8%;
        right: 0%;
        width: 60.6%;
        height: 34.2%;
    }

    #section6 .feld2 {
        top: 45.6%;
        left: 39.3%;
        width: 23.9%;
        height: 30.6%;
    }

    #section6 .feld3 {
        top: 35.5%;
        left: 0%;
        width: 36.1%;
        height: 20.3%;
    }

    #section6 .feld4 {
        top: 65%;
        left: 4.8%;
        width: 25.2%;
        height: 32.3%;
    }

    #section6 .feld5 {
        top: 81.7%;
        right: 0%;
        width: 53.2%;
        height: auto;
    }
}

@media (max-width: 998px) {
  /* #0 */
  #section4 .feld1.reveal-left.is-visible {
  }

  /* #1 */
  #section4 .feld2.reveal-right.is-visible {
    margin-right: 0px;
    width: 75%;
  }

  /* #2 */
  #section4 .feld3.reveal-left.is-visible {
    margin-top: auto;
    margin-left: 0px;
    width: 30%;
  }
	
  /* #3 */
  #section4 .feld4.reveal-scale.is-visible {
    margin-right: 0px;
    width: 59%;
    margin-top:-25%;
  }

  /* #4 */
  #section5 .feld0.reveal-left.is-visible {
    margin-left: 0px;
    width: 70%;
  }
	#section6 .feld0 {
		margin-left:10%;
		z-index:10;
	}
  /* #5 */
  #section6 .feld1.reveal-right.is-visible {
    margin-right: 0px;
    margin-left:auto;
    width: 70%;
    margin-top:-33%;
  }

  /* #6 */
  #section6 .feld2.reveal-right.is-visible {
    margin-right: auto;
    margin-left:0;
    width: 40%;
  }

  /* #7 */
  #section6 .feld3.reveal-left.is-visible {
    margin-right: 0px;
    width: 55%;
    margin-top:-30%
  }
	
  /* #8 */
  #section6 .feld4.reveal-left.is-visible {
    margin-left: 0px;
    width:40%;
    margin-top:-15%;
  }
}