/* Ankommen-Bereich – Positionierung (Section 9–10)
   3 Zonen: max-width:999px / 1025–1600px / min-width:1600px. */


/* ==========================================================================
   Grundlagen: Bild-Felder mit JPG-Hintergrund (section- & zonenübergreifend)
   feld5 in #section9 nutzt ein echtes <img> statt background-image und
   feld1 in #section9 ein Blob/SVG (background-size:contain) – beide daher
   bewusst nicht in dieser Liste.
   ========================================================================== */
#section9 .feld2,
#section9 .feld3,
#section9 .feld4,
#section10 .feld0,
#section10 .feld1 {
    background-repeat: no-repeat;
    background-size: cover;
}


/* ==========================================================================
   Section 9 – Hauptcontainer (Absolute Basis, Variante "freisetzend")
   Referenzmaße Desktop-Layout ca. 638px x 940px
   ========================================================================== */

#section9 .feld1 .text h1 {
    color: var(--brand-wte);
    margin: 0;
    text-align: left;
}

#section9 .feld5 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 999px) {
    #section9 .container.freisetzend {
        aspect-ratio: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 var(--gutter);
    }

    #section9 .feld0,
    #section9 .feld6 {
        position: static;
        width: 100%;
        height: auto;
    }

    #section9 .feld1 {
        position: static;
        width: 65%;
        height: auto;
        padding: 3.9rem 1rem 2rem 3rem;
        aspect-ratio: 1 / .7;
        background-size:100%;
        background-repeat:no-repeat;
		margin-bottom:-80px;
		margin-left:-8%;
		z-index:5
    }

    #section9 .feld2 {
        position: static;
        width: 100%;
        aspect-ratio: 1 / .7;
        margin: 0 auto;
    }

    #section9 .feld3 {
        position: static;
        width: 100%;
        aspect-ratio: 1 / .7;
        margin: 0 auto;
    }

    #section9 .feld4 {
        position: static;
        width: 100%;
         aspect-ratio: 1 / .7;
        margin: 0 auto;
    }

    #section9 .feld5 {
        position: static;
        width: 100%;
        
        aspect-ratio: 1 / 1.3;
            background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    }
}

@media (min-width: 1025px) and (max-width: 1600px) {
    #section9 .container.freisetzend {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 638 / 940;
        margin-inline: auto;
        margin-top: 3rem;
    }

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

    /* Feld 0: Einleitungstext oben links */
    #section9 .feld0 {
        top: 0%;
        left: 0%;
        width: 56.5%;
        height: auto;
    }

    /* Feld 1: Blob "Ankommen. Durchatmen. Bei dir sein." oben rechts */
    #section9 .feld1 {
        top: 12%;
        left: 55.9%;
        width: 44.6%;
        height: 26.3%;
        z-index: 5;
        background-size: contain;
        display: flex;
        align-items: center;
        padding-left: 6%;
        box-sizing: border-box;
    }

    /* Feld 2: Küchen-/Wohnraum-Foto links */
    #section9 .feld2 {
        top: 23%;
        left: 0%;
        width: 59.6%;
        height: 27.3%;
    }

    /* Feld 3: Flur-/Sitzbank-Foto, versetzt darunter */
    #section9 .feld3 {
        top: 52.5%;
        left: 24.4%;
        width: 35.3%;
        height: 16.2%;
    }

    /* Feld 4: Bilderrahmen-Foto rechts */
    #section9 .feld4 {
        top: 36.3%;
        left: 62.6%;
        width: 33.9%;
        height: 20.7%;
    }

    /* Feld 5: kleines Foto (Kissen/Bank), direktes <img> statt Hintergrund */
    #section9 .feld5 {
        top: 59.1%;
        left: 62.8%;
        width: 23.5%;
        height: 22.7%;
        overflow: hidden;
        background-size: cover;
    }

    /* Feld 6: Abschlusstext unten links */
    #section9 .feld6 {
        top: 75.8%;
        left: 0%;
        width: 52.5%;
        height: auto;
    }
}

@media (min-width: 1600px) {
    #section9 .container.freisetzend {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 638 / 940;
        margin-inline: auto;
        margin-top: 3rem;
    }

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

    #section9 .feld0 {
        top: 0%;
        left: 0%;
        width: 56.5%;
        height: auto;
    }

    #section9 .feld1 {
        top: 12%;
        left: 55.9%;
        width: 44.6%;
        height: 26.3%;
        z-index: 5;
        background-size: cover;
        display: flex;
        align-items: center;
        padding-left: 6%;
        box-sizing: border-box;
    }

    #section9 .feld2 {
        top: 23%;
        left: 0%;
        width: 59.6%;
        height: 27.3%;
    }

    #section9 .feld3 {
        top: 52.5%;
        left: 24.4%;
        width: 35.3%;
        height: 16.2%;
    }

    #section9 .feld4 {
        top: 36.3%;
        left: 62.6%;
        width: 33.9%;
        height: 20.7%;
    }

    #section9 .feld5 {
        top: 59.1%;
        left: 62.8%;
        width: 24.5%;
        height: 22.7%;
        overflow: hidden;
        background-size:cover;
    }

    #section9 .feld6 {
        top: 75.8%;
        left: 0%;
        width: 52.5%;
        height: auto;
    }
}


/* ==========================================================================
   Section 10 – Hauptcontainer (Absolute Basis, Variante "freisetzend")
   Referenzmaße Desktop-Layout ca. 638px x 545px
   ========================================================================== */

#section10 {
    padding-top: 0;
}

#section10 .feld2 h1 {
    color: var(--brand-accent);
    margin: 0;
    line-height: 0.95;
    text-align: right;
}

@media (max-width: 999px) {
    #section10 .container.freisetzend {
        aspect-ratio: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 var(--gutter);
        aspect-ratio:410 / 500;
    }

    #section10 .feld2 {
        position: static;
        width: 100%;
        height: auto;
         
        white-space: normal;
    }

    #section10 .feld0 {
        position: static;
        width: 100%;
aspect-ratio: 1 / .7;
         height:auto;
        margin: 0 auto;
        white-space: normal;
    }

    #section10 .feld1 {
        position: static;
        width: 100%;
	aspect-ratio: 1 / .7;
         height:auto;
        margin: 0 auto;
        white-space: normal;
    }
    
#section10 .feld2 h2 {
    color: var(--brand-primary);
    margin: 0;
    line-height: 0.95em;
    font-size:var(--font-size-big);
    text-align:right;
}
}

@media (min-width: 1025px) and (max-width: 1600px) {
    section.containermitrand#section10 .container.freisetzend {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 638 / 545;
        margin-inline: auto;
        margin-top: 0rem;
        margin-bottom: 3rem;
    }

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

    /* Feld 0: Gruppenfoto oben */
    #section10 .feld0 {
        top: 1.5%;
        left: 6%;
        width: 81%;
        height: 59.2%;
        min-width:987px;
    }

    /* Feld 1: Foto "Öffne das Fenster deiner Seele", unten links */
    #section10 .feld1 {
        top: 73.4%;
        left: 0%;
        width: 35.3%;
        height: 26.6%;
    }

#section10 .feld2 h2 {
    color: var(--brand-primary);
    margin: 0;
    line-height: 0.95em;
    font-size:var(--font-size-big);
    text-align:right;
}

    /* Feld 2: Überschrift "AN KOMMEN", läuft bewusst über den rechten Rand
       hinaus (white-space:nowrap + width:auto). Der body hat global
       overflow-x:hidden, daher wird am Viewport-Rand sauber abgeschnitten. */
    #section10 .feld2 {
        top: 56.4%;
        left: 57.5%;
        width: auto;
        height: auto;
        white-space: nowrap;
    }
}

@media (min-width: 1600px) {
    section.containermitrand#section10 .container.freisetzend {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 638 / 545;
        margin-inline: auto;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

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

    #section10 .feld0 {
        top: 1.5%;
        left: 10%;
        width: 80%;
        height: 61%;
    }

    #section10 .feld1 {
        top: 73.4%;
        left: -5%;
        width: 35.3%;
        height: 26.6%;
    }

    #section10 .feld2 {
        top: 55.4%;
        left: 45%;
        width: auto;
        height: auto;
        white-space: nowrap;
    }
    
    #section10 .feld2 h2 {
    
    	font-size:var(--font-size-big);
    	text-align:right;
    
    }
    
    
#section10 .feld2 h2 {
    color: var(--brand-primary);
    margin: 0;
    line-height: 0.95em;
    font-size:var(--font-size-big);
    text-align:right;
}
}


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

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

  /* #2 */
  #section9 .feld3.reveal-left.is-visible {
    margin-left: 0px;
    width: 50%;
    margin-top:0%;
  }

  /* #3 */
  #section9 .feld4.reveal-right.is-visible {
    margin-right: 0px;
    width: 45%;
    margin-top:-20%;
  }

  /* #4 */
  #section9 .feld5.reveal-right.is-visible {
    width: 40%;
    margin-top:-24%;
    margin-left:10%;
  }

  /* #5 */
  #section10 .feld0.reveal-scale.is-visible {
  width:75%;

  }
  
   #section10 .feld2 {

	margin-top:-17%;
  }

  /* #6 */
  #section10 .feld1.reveal-left.is-visible {
    margin-left: 0px;
    width: 50%;
    
  }
}