/* ==========================================================================
   Dein Yoga › Dein Einstieg
   https://test.teufel-graphics.de/dein-yoga/dein-einstieg/

   Werte aus "Website (verschoben) 2.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt),
   identisch zur Team-Seite (special4.css).

   Sections:
     #section25 – Hero: H1 + Intro-Text          (feld0, feld1)
     #section26 – 3 Fotos + Text/Buttons,
                  SVG-Form als Section-BG        (feld0–feld3)
     #section27 – Bild-Banner full-bleed         (leer)
     .bewertungenumgebend – Bewertungs-Slider    (ohne ID)

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


/* ==========================================================================
   Section 25 – Hero "YOGA - AUF DEINE WEISE" + Intro
   ========================================================================== */

#section25 h1 {
    color: var(--brand-text);
    margin-top: 4px;
}

#section25 p {
    color: var(--brand-text);
    margin-top: 0;
}
@media (min-width:1000px) {

a.button + a.button  {
margin-left:20px;
}
}
/* H1 – im Layout rechtsbündig (Desktop), mobil linksbündig (siehe Zone 1) */
#section25 .feld0 h1 {
    text-align: right;
}

@media (max-width: 999px) {
    #section25 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem var(--gutter);
    }
    #section25 [class^="feld"] {
        position: relative;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    #section25 .feld0 h1 {
        text-align: left;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section25 {
        padding-top: 10rem;
    }
    #section25 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 550;
        margin: 0 auto;
    }
    #section25 [class^="feld"] {
        position: absolute;
    }
    /* H1 – im Layout rechtsbündig */
    #section25 .feld0 {
        left: 8.6%;
        top: 4%;
        width: 37.7%;
        height: 35.1%;
    }
    /* Intro-Text, zwei Absätze */
    #section25 .feld1 {
        left: 50.8%;
        top: 4.6%;
        width: 49.3%;
        height: 95.6%;
    }
}

@media (min-width: 1600px) {
    #section25 {
        padding-top: 10rem;
    }
    #section25 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 550;
        margin: 0 auto;
    }
    #section25 [class^="feld"] {
        position: absolute;
    }
    /* H1 – im Layout rechtsbündig */
    #section25 .feld0 {
        left: 8.6%;
        top: 4%;
        width: 37.7%;
        height: 35.1%;
    }
    /* Intro-Text, zwei Absätze */
    #section25 .feld1 {
        left: 50.8%;
        top: 4.6%;
        width: 49.3%;
        height: 95.6%;
    }
}


/* ==========================================================================
   Section 26 – Drei Fotos + Text mit Buttons
   BG: /media/schnupper-forme-13-pdf-seite-8.svg (mobil: …-mobil.svg)
   Die Terracotta-Form ist im PDF breiter als die Seite und beginnt bei
   ca. 17% der Sectionhöhe; sie ragt unten in den Banner (Section 27) hinein.
   ========================================================================== */

#section26 {
    position: relative;
    background-size: contain;
    background-position: center 85%;
    background-repeat: no-repeat;
    z-index: 5;
}

#section26 p {
    color: var(--brand-wte);
}

@media (max-width: 999px) {
    #section26 {
        background-image: url(../../media/schnupper-forme-13-pdf-seite-8-mobil.svg) !important;
        background-size:120%;
        background-position:bottom;
        padding-bottom:4.5rem;
        margin-bottom:-4.5rem;
        padding-top:4rem;

    }
    #section26 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem var(--gutter);
    }
    #section26 [class^="feld"] {
        position: relative;
        width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    /* Foto quer, oben links */
    #section26 .feld0 {
        width: 40%;
        margin-left: 0;
        margin-right: auto;
        aspect-ratio: 953 / 612;
        background-size: cover;
		position:absolute;
		top:10%;

    }
    /* Foto hoch, rechts */
    #section26 .feld1 {
        width: 45%;
        margin-left: auto;
        margin-right: 0;
        aspect-ratio: 576 / 817;
        background-size: cover;
		margin-top:80px;
    }
    /* Foto hoch, Mitte unten */
    #section26 .feld2 {
        aspect-ratio: 488 / 678;
        background-size: cover;
        width: 40%;
        margin-left: 8%;
        margin-top:-57%;
    }
    
    #section26 .feld4 {
    	width: 30%;
        margin-left: 0%;
        margin-right: 0;
        aspect-ratio: 576 / 817;
        background-size: cover;
		margin-top:-150px;
		margin-left:25%;
		display:none;
    }
    
        #section26 .feld4 img {
        width:100%;
        height:auto;
        position:relative;
        }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section26 .container {
        position: relative;
        aspect-ratio: 1782 / 1932;
        margin: 0 auto;
        z-index: 5;
    }
    #section26 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 4;
    }
    /* Foto quer, oben links – ragt links über den Container hinaus */
    #section26 .feld0 {
        left: -7.3%;
        top: 1.5%;
        width: 53.5%;
        height: 31.7%;
        background-size: cover;
    }
    /* Foto hoch, rechts */
    #section26 .feld1 {
        left: 50.6%;
        top: 10%;
        width: 32.3%;
        height: 42.3%;
        background-size: cover;
    }
    /* Foto hoch, Mitte unten */
    #section26 .feld2 {
        left: 18.8%;
        top: 39.6%;
        width: 27.4%;
        height: 35.1%;
        background-size: cover;
    }
    /* Text + Buttons – Buttons ragen laut Layout unten in den Banner */
    #section26 .feld3 {
        left: 50.6%;
        top: 57.7%;
        width: 33.1%;
        height: 38.8%;
        z-index: 2;
    }
    /* Neu, noch nicht im Markup: 15% x 15%, Mittelpunkt sitzt auf der
       unteren linken Ecke von feld2 (also zur Hälfte über dem Foto,
       zur Hälfte links/unten davon), 60% Deckkraft. Nur Desktop. */
    #section26 .feld4 {
        left: 2.3%;
        top: 54.2%;
        width: 13%;
        height: 15%;
        opacity: 0.6;
        background-size: cover;
    }
}

@media (min-width: 1600px) {
    #section26 .container {
        position: relative;
        aspect-ratio: 1782 / 1832;
        margin: 0 auto;
        z-index: 5;
    }
    #section26 [class^="feld"] {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 4;
    }
    /* Foto quer, oben links – ragt links über den Container hinaus */
    #section26 .feld0 {
        left: -7.3%;
        top: 1.5%;
        width: 53.5%;
        height: 31.7%;
        background-size: cover;
    }
    /* Foto hoch, rechts */
    #section26 .feld1 {
        left: 50.6%;
        top: 10%;
        width: 32.3%;
        height: 42.3%;
        background-size: cover;
    }
    /* Foto hoch, Mitte unten */
    #section26 .feld2 {
        left: 18.8%;
        top: 39.6%;
        width: 27.4%;
        height: 35.1%;
        background-size: cover;
    }
    
    #section26 .feld4 {
        left: 3.8%;
        top: 50.6%;
        width: 24.4%;
        height: 32.1%;
        background-size: cover;
  
    }
    /* Text + Buttons – Buttons ragen laut Layout unten in den Banner */
    #section26 .feld3 {
        left: 50.6%;
        top: 57.7%;
        width: 33.1%;
        height: 32.8%;
        z-index: 2;
    }
}


/* ==========================================================================
   Section 27 – Bild-Banner (full-bleed, Container leer)
   BG: /media/deine_weise_yoga_einstieg_05.jpg
   ========================================================================== */

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

#section27 div h2 {
    color: var(--brand-primary);
}

#section27 .container {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--container-max-width);
    height: 100%;
    margin: 0 auto;
}

@media (max-width: 999px) {
    /* -180px war auf die Desktop-Zeilenhöhe der vorherigen Section
       abgestimmt; auf Mobile (andere Stapelhöhen) zieht das den Banner
       zu weit hoch */
    #section27 {
        margin-top: 0;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section27 {
        margin-top: -180px;
    }
}

@media (min-width: 1600px) {
    #section27 {
        margin-top: -180px;
    }
}


/* ==========================================================================
   Bewertungs-Slider "Erfahrungen" (Section ohne ID)
   Slide-Text mittig, Breite ~56% des Containers, Pfeile seitlich.
   Bestehendes Aussehen unverändert – ergänzt nur um die
   Slider-Zustände (.aktiv, .von-links/.von-rechts, .animiert)
   für init-special10.js
   ========================================================================== */

.bewertungenumgebend {
    position: relative;
}

.bewertungenumgebend .container.bewertungen {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.bewertungenumgebend .bewertungsslider {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 8rem 0 4rem 0;
}

/* Achtung: Klasse im Markup heißt "bwertungsslide" (ohne e) */
.bewertungenumgebend .bewertungsslide .text {
    width: 84%;
    margin: 0 auto;
}

.bewertungenumgebend .bewertungsslide .autor {
    width: 84%;
    margin: 0 auto;
}

.bewertungenumgebend .bewertungsslider .intro {
    width: 84%;
    margin: 0 auto;
}

@media (max-width:1000px) {
.bewertungenumgebend .bewertungsslide .autor {
    width: 75%;
    margin: 0 auto;
}

.bewertungenumgebend .bewertungsslider .intro {
    width: 75%;
    margin: 0 auto;
}
}
.bewertungenumgebend .bewertungsslider .intro h2 {
    margin-bottom: 0;
    color: var(--brand-primary);
}

.bewertungenumgebend .bewertungsslide .text p {
    text-align: justify;
}

/* Pfeile: "top" wird per JS (init-special10.js) auf die vertikale Mitte
   des jeweils aktiven Slides gesetzt (Bewertungen sind unterschiedlich
   lang, die Slider-Gesamthöhe inkl. Intro-Headline ist daher kein
   verlässlicher Bezugspunkt). 50% hier ist nur der Fallback, bevor JS
   greift bzw. falls JS deaktiviert ist. */
.bewertungenumgebend .bewertungsslider .prev,
.bewertungenumgebend .bewertungsslider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--brand-primary);
}

.bewertungenumgebend .bewertungsslider .prev {
    left: -2%;
    z-index: 100;
}

.bewertungenumgebend .bewertungsslider .next {
    right: -2%;
    z-index: 100;
}

/* Desktop: Pfeile weiter vom Text weg (~10% statt 2%) */
@media (min-width: 1000px) and (max-width: 1600px) {
    .bewertungenumgebend .bewertungsslider .prev {
        left: -10%;
    }
    .bewertungenumgebend .bewertungsslider .next {
        right: -10%;
    }
}

@media (min-width: 1600px) {
    .bewertungenumgebend .bewertungsslider .prev {
        left: -10%;
    }
    .bewertungenumgebend .bewertungsslider .next {
        right: -10%;
    }
}

/* Nur der aktive Slide ist sichtbar. Keine feste Höhe mehr (war 211px) –
   die Bewertungstexte sind sehr unterschiedlich lang, eine feste Höhe
   hätte lange Texte abgeschnitten bzw. die Höhenmessung für die
   Pfeil-Zentrierung in init-special10.js verfälscht. */
.bewertungenumgebend .bewertungsslide {
    display: none;
}

.bewertungenumgebend .bewertungsslide.aktiv {
    display: block;
}

/* Einblend-Animation je nach Richtung */
@keyframes bewertung-von-rechts {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes bewertung-von-links {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.bewertungenumgebend .bewertungsslide.aktiv.von-rechts {
    animation: bewertung-von-rechts 0.45s ease both;
}

.bewertungenumgebend .bewertungsslide.aktiv.von-links {
    animation: bewertung-von-links 0.45s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .bewertungenumgebend .bewertungsslide.aktiv.von-rechts,
    .bewertungenumgebend .bewertungsslide.aktiv.von-links {
        animation: none;
    }
}

/* Doppelklick-Schutz während der Animation */
.bewertungenumgebend .bewertungsslider.animiert .prev,
.bewertungenumgebend .bewertungsslider.animiert .next {
    pointer-events: none;
    opacity: 0.5;
}

@media (max-width: 999px) {
    .bewertungenumgebend .bewertungsslider {
        width: 100%;
        padding: 5rem 0 1rem 0;
    }

    article section:last-of-type {
padding-bottom: 3rem;
position: relative;
}

.bewertungenumgebend .bewertungsslide .text {
width: 75%;
margin: 0 auto;
}
}