/* ==========================================================================
   Dein Yoga › Deine Level
   Werte aus "Website (verschoben) 3.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt),
   identisch zu Team- und Einstieg-Seite.

   Sections:
     #section29 – "1" Anfaenger        (feld0 Ziffer, feld1 Foto, feld2 Text)
     #section31 – "2" Intermediate     (feld0 Ziffer, feld1 Foto, feld2 Text)
     #section33 – Alle Level           (feld0 Foto, feld1 Text, feld2 Foto)
                  BG: alle-forme-14-pdf-seite-8.svg (olive, full-bleed)
     #section32 – "3" Fortgeschritten  (feld0 Ziffer, feld1 Foto, feld2 Text)

   Die großen Ziffern haben im PDF 130 pt ≈ 12.7% der Containerbreite
   → einzige Sonder-Schriftgröße (12.7cqw), Rest aus den Variablen.
   container-type:inline-size sitzt daher am .container – in allen 3
   Zonen, damit die cqw-Ziffern auch mobil korrekt skalieren.

   3 Zonen wie special4.css: max-width:999px / 1000–1600px / min-width:1600px.
   ========================================================================== */

section h2 {
    color: var(--brand-text);
}

.container div h2 {
    margin-top: 0;
    margin-bottom: 0;
}

h2 + p {
    margin-top: 0;
    margin-bottom: 3rem;
}

/* Große Ziffern 1 / 2 / 3 – sectionübergreifend
   PDF: 130 pt bei 1023 pt Containerbreite = 12.7cqw */
#section29 .feld0 h2,
#section31 .feld0 h2,
#section32 .feld0 h2 {
    font-size: var(--font-size-big);
    line-height: 1;
    margin: 0;

}


/* ==========================================================================
   Section 29 – 1 / Anfaenger
   ========================================================================== */

@media (max-width: 999px) {
 section .container {
 padding: 0rem var(--gutter);
 }
#section29 {
padding-bottom:0;
padding-top:1.5rem;
}
#section29 .feld0 {
margin-bottom:-96px;
} 

#section29 .feld0 h2,
#section31 .feld0 h2,
#section32 .feld0 h2 {
    font-size: var(--font-size-big);
    line-height: 1;
    margin: 0;
	    text-align:left!important;
}
    #section29 .container {
        container-type: inline-size;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-block: 2rem;
    }
    #section29 [class^="feld"] {
        position: relative;
        width: 100%;
        height: auto;
    }
    /* Foto */
    #section29 .feld1 {
        aspect-ratio: 574 / 638;
        background-size: cover;
        width:65%;
        margin-left:auto;
        margin-right:0;
    }
    
#section29 .feld2 h2:first-child,
#section29 .feld2 h2:first-child + p {
  margin-left: 15%;
}
    
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section29 .container {
        container-type: inline-size;
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1029;
        margin: 0 auto;
    }
    #section29 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Ziffer 1 – rechtsbündig über dem Foto */
    #section29 .feld0 {
        left: 28.7%;
        top: 3.6%;
        width: 14.8%;
        height: 17.8%;
    }
    /* Foto */
    #section29 .feld1 {
        left: 11.4%;
        top: 29.4%;
        width: 30.8%;
        height: 62%;
        background-size: cover;
    }
    /* Text */
    #section29 .feld2 {
        left: 48.5%;
        top: 5.1%;
        width: 51.5%;
        height: 30.1%;
    }
}

@media (min-width: 1600px) {
    #section29 {
   padding-bottom:2rem;
   padding-top:8rem;
   }
    #section29 .container {
        container-type: inline-size;
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1129;
        margin: 0 auto;
        padding-bottom:0;
    }
    #section29 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Ziffer 1 – rechtsbündig über dem Foto */
    #section29 .feld0 {
        left: 28.7%;
        top:-0.5%;
        width: 14.8%;
        height: 17.8%;
    }
    /* Foto */
    #section29 .feld1 {
        left: 11.4%;
        top: 29.4%;
        width: 30.8%;
        height: 62%;
        background-size: cover;
    }
    /* Text */
    #section29 .feld2 {
        left: 48.5%;
        top: 5.1%;
        width: 51.5%;
        height: 30.1%;
    }
}


/* ==========================================================================
   Section 31 – 2 / Intermediate  (spiegelverkehrt: Text links, Foto rechts)
   ========================================================================== */

/* Überschrift "Intermediate" ist im Layout rechtsbündig (Desktop) */
#section31 .feld2 h2 {
    text-align: right;
}

@media (max-width: 999px) {
	
	#section31 {
		padding-top:1rem;
		padding-bottom:0rem;
	}
	
    #section31 .container {
        container-type: inline-size;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
         padding: 0rem var(--gutter);
    }
    #section31 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    #section31 .feld2 h2 {
        text-align: left;
    }
    
    #section31 .feld2 h2 + p {
    	display:none;
    }
    
    #section31 .feld0 {
		margin-bottom:-70px;
	} 
    
    /* Foto quer rechts */
    #section31 .feld1 {
        aspect-ratio: 628 / 416;
        background-size: cover;
        width:65%;
        margin-left:0;
        margin-right:0;
    }
    
#section31 .feld2 h2:first-child {
  margin-left: 15%;
}
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section31 {
    	padding-bottom:0;
    }
    #section31 .container {
        container-type: inline-size;
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1011;
        margin: 0 auto;
        padding-bottom:0;
    }
    #section31 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Ziffer 2 – steht mittig über dem Textblock-Beginn */
    #section31 .feld0 {
        left: 48.5%;
        top: 8.9%;
        width: 9.3%;
        height: 19.5%;
    }
    /* Foto quer rechts */
    #section31 .feld1 {
        left: 63.2%;
        top: 40%;
        width: 33.7%;
        height: 41.1%;
        background-size: cover;
    }
    /* Text links – ragt links über den Container hinaus */
    #section31 .feld2 {
        left: 0%;
        top: 14.7%;
        width: 48.8%;
        height: 54.1%;
    }
}

@media (min-width: 1600px) {
   #section31 {
   padding-top:2rem;
   padding-bottom:0rem;
   }
   
   #section31 .container {
        container-type: inline-size;
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1011;
        margin: 0 auto;
        
    }
    #section31 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Ziffer 2 – steht mittig über dem Textblock-Beginn */
    #section31 .feld0 {
        left: 48.5%;
        top: 2.9%;
        width: 9.3%;
        height: 19.5%;
    }
    /* Foto quer rechts */
    #section31 .feld1 {
        left: 63.2%;
        top: 40%;
        width: 33.7%;
        height: 41.1%;
        background-size: cover;
    }
    /* Text links – ragt links über den Container hinaus */
    #section31 .feld2 {
        left: -6.5%;
        top: 14.7%;
        width: 48.8%;
        height: 54.1%;
    }
}


/* ==========================================================================
   Section 33 – Alle Level
   BG: /media/alle-forme-14-pdf-seite-8.svg (olive, volle Breite)
   Foto feld2 ragt unten ca. 9% über die Section hinaus.
   ========================================================================== */

#section33 {
    position: relative;
    width: 100%;
    aspect-ratio: 2480 / 1453;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Text auf olivem Grund in Weiß */
#section33 .feld1 h2,
#section33 .feld1 p {
    color: var(--brand-wte);
}

@media (max-width: 999px) {
	#section33 {
        background-image: url(../../media/alle-forme-14-pdf-seite-8-mobil.svg) !important;
        background-size:105%;
        background-position:bottom;
        padding-bottom:6.5rem;
        padding-top:3rem;
    }
    #section33 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
         padding: 2rem var(--gutter);
    }
    #section33 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    /* Foto links */
    #section33 .feld0 {
        aspect-ratio: 875 / 572;
        background-size: cover;
        width:65%;
        margin-right:auto;
    }
    /* Foto rechts unten */
    
    #section33 .feld1 h2 + p {
    	display:none;
    }
    #section33 .feld2 {
        aspect-ratio: 694 / 460;
        background-size: cover;
        width:65%;
        margin-left:auto;
        margin-right:0;
    }
    
        #section31 .feld0 {
		margin-bottom:-70px;
	} 

    

    
}

@media (min-width: 1000px) and (max-width: 1600px) {
#section33 {
    	padding-top:0;
    	background-size:125%;
    }
    #section33 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1451;
        margin: 0 auto;
        overflow: visible;
    }
    #section33 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Foto links – ragt links über den Container hinaus */
    #section33 .feld0 {
        left: 2.4%;
        top: 29.5%;
        width: 40%;
        height: 30.4%;
        background-size: cover;
    }
    #section33 .feld1 {
        left: 48.9%;
        top: 14.2%;
        width: 51%;
        height: 48%;
    }
    /* Foto rechts unten – überlappt die nächste Section */
    #section33 .feld2 {
        left: 48.9%;
        top: 75.7%;
        width: 30%;
        height: 34%;
        background-size: cover;
        z-index: 2;
    }
}

@media (min-width: 1600px) {
   
    #section33 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1451;
        margin: 0 auto;
        overflow: visible;
    }
    #section33 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Foto links – ragt links über den Container hinaus */
    #section33 .feld0 {
        left: -3.4%;
        top: 29.5%;
        width: 47%;
        height: 39.4%;
        background-size: cover;
    }
    #section33 .feld1 {
        left: 48.9%;
        top: 14.2%;
        width: 51%;
        height: 48%;
    }
    /* Foto rechts unten – überlappt die nächste Section */
    #section33 .feld2 {
        left: 48.9%;
        top: 75.7%;
        width: 39.6%;
        height: 34%;
        background-size: cover;
        z-index: 2;
    }
}


/* ==========================================================================
   Section 32 – 3 / Fortgeschritten
   ========================================================================== */

@media (max-width: 999px) {
    #section32 .container {
        container-type: inline-size;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0rem var(--gutter);
    }
    #section32 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
    
    #section32 .feld0 {
    	margin-bottom:-101px;
    }
    /* Foto – ragt leicht über die linke Containerkante (Desktop) */
    #section32 .feld1 {
        aspect-ratio: 652 / 505;
        background-size: cover;
        width:65%;
        margin-right:auto;
        margin-left:0;
        margin-bottom:5%;
    }
    
    #section32 .feld2 h2 + p {
    	display:none;
    }
    #section32 .feld2 h2:first-child {
  		margin-left: 15%;
	}
}

@media (min-width: 1000px) and (max-width: 1600px) {
    
    
    #section32 .container {
        container-type: inline-size;
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1228;
        margin: 0 auto;
    }
    #section32 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section32 .feld0 {
        left: 27.5%;
        top: 13.5%;
        width: 15.3%;
        height: 16.6%;
    }
    /* Foto – ragt leicht über die linke Containerkante */
    #section32 .feld1 {
        left: 0.1%;
        top: 39.9%;
        width: 35%;
        height: 41.1%;
        background-size: cover;
    }
    #section32 .feld2 {
        left: 49%;
        top: 13.3%;
        width: 48.6%;
        height: 64%;
    }
}

@media (min-width: 1600px) {
	#section32 {
		margin-top:2rem;
		
	}
	
    #section32 .container {
        container-type: inline-size;
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1228;
        margin: 0 auto;
    }
    #section32 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
    }
    #section32 .feld0 {
        left: 27.5%;
        top: 10.0%;
        width: 15.3%;
        height: 16.6%;
    }
    /* Foto – ragt leicht über die linke Containerkante */
    #section32 .feld1 {
        left: 0.1%;
        top: 39.9%;
        width: 35%;
        height: 41.1%;
        background-size: cover;
    }
    #section32 .feld2 {
        left: 49%;
        top: 13.3%;
        width: 48.6%;
        height: 64%;
    }
}