/* ==========================================================================
   Dein Studio › Studiovermietung
   Werte aus "Website (verschoben) 15.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt).

     #section66 – feld0 H1 "RAUM ZUM SEIN"  (rechtsbündig, über der Form)
                  feld1 Text + Button
                  feld2 Foto quer links, bleedet über den Seitenrand
                  feld3 Foto quer rechts, überlappt feld2

   3 Zonen wie special4.css: max-width:999px / 1000–1600px / min-width:1600px.
   Zone 2 und Zone 3 sind identisch (im Original keine unterschiedlichen
   Desktop-Werte vorhanden). Die beiden im Original nach der Mobil-Zone
   nachträglich stehenden feld0/feld1-Overrides wurden hier zu den
   finalen (letztgültigen) Werten zusammengeführt.
   ========================================================================== */

section h1,
section h2 {
    margin: 0;

    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    color: var(--brand-wte);
}

section a {
    color: var(--brand-primary);
    text-decoration: none;
}

section h3 {
    font-family: var(--font-body);
    font-size: var(--font-size-h3);
    font-weight: normal;
    letter-spacing: var(--letter-spacing-b);
    text-transform: uppercase;
    line-height: var(--line-height-p);
    color: var(--brand-primary);
    cursor: default;
    margin: 0 0 1.4em;
}


/* ==========================================================================
   Section 66
   ========================================================================== */

#section66 {
    overflow: clip;          /* Foto links ragt über den Seitenrand */
    padding-top: 5rem;
}

#section66 .feld0 h1 {
    text-align: right;
    margin: 0;
}

#section66 .feld1 p {
    text-align: justify;
    margin: 0 0 1.4em;
}

#section66 .feld1 p:last-child {
    margin-top: 2rem;
    margin-bottom: 0;
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 999px) {

    #section66 {
        overflow: clip;          /* Foto links ragt über den Seitenrand */
        padding-top: 2rem;
    }

    #section66 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem var(--gutter);
    }

    #section66 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }

	#section66 .feld0 {
		aspect-ratio: 3 / 1.5;
		width:25%;
		height:40%;
		height:auto;
		position:relative;
		background-size:contain;
		background-repeat:no-repeat;
		margin-top:1rem;
		padding-left:3rem;
		padding-top:2rem;
		padding-right:3rem;
		padding-bottom:3rem;
		margin-right:0;
		margin-left:0;
		max-width:355px;
	}
#section66 .feld0 .text {
	max-width:100px;
}
    #section66 .feld0 h2 {
        text-align: right!important;
    }

    #section66 .feld2 {
        aspect-ratio: 3 / 2;
        background-size: cover;
        width:60%;
        margin-right:0;
		margin-left:auto;
		margin-top:-100px;
    }

    #section66 .feld3 {
        aspect-ratio: 3 / 2;
        background-size: cover;
        width:50%;
        
    }
}

/* --- Desktop 1000–1600px --------------------------------------------------- */

@media (min-width: 1000px) and (max-width: 1600px) {
    #section66 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 1529;
        margin: 0 auto;
    }

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

    /* Olive Form mit H1 "RAUM ZUM SEIN"
       Formmaße aus dem PDF: 296 x 358 pt, echte Pfad-Bounding-Box.
       background-size: 100% 100%, damit die Form das Feld exakt füllt. */
    #section66 .feld0 {
        left: 6.8%;
        top: -9.5%;
        width: 29.5%;
        height: 42.6%;
        background-size: 100% 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 22% 8% 0 0;
        z-index: 3;
    }

    /* Text mit Anfragen-Button */
    #section66 .feld1 {
        left: 50%;
        top: 9.6%;
        width: 50%;
        height: 42.9%;
        z-index: 3;
    }

    /* Foto links – bleedet über den linken Seitenrand */
    #section66 .feld2 {
        left: -16.6%;
        top: 42.5%;
        width: 52.4%;
        height: 42.6%;
        background-size: cover;
        z-index: 1;
    }

    /* Foto rechts – überlappt das linke Foto */
    #section66 .feld3 {
        left: 40%;
        top: 64.9%;
        width: 39.1%;
        height: 31.9%;
        background-size: cover;
        z-index: 2;
    }
}

/* --- Desktop ab 1600px ------------------------------------------------------ */

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

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

    #section66 .feld0 {
        left: 6.8%;
        top: -9.5%;
        width: 29.5%;
        height: 42.6%;
        background-size: 100% 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 22% 8% 0 0;
        z-index: 3;
    }

    #section66 .feld1 {
        left: 50%;
        top: 9.6%;
        width: 50%;
        height: 42.9%;
        z-index: 3;
    }

    #section66 .feld2 {
        left: -16.6%;
        top: 42.5%;
        width: 52.4%;
        height: 42.6%;
        background-size: cover;
        z-index: 1;
    }

    #section66 .feld3 {
        left: 40%;
        top: 64.9%;
        width: 39.1%;
        height: 31.9%;
        background-size: cover;
        z-index: 2;
    }
}