/* 1. BASIS-STILE */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent; 
}

/* 2. DER WRAPPER (Zentriert den Inhalt) */
.site-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. DAS PARALLAX-ELEMENT (Desktop Standard) */
#parallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    --move-x: 0px;
    --move-y: 0px;

    /* Bilder-Reihenfolge: Stones1 (vorne), Island, Sun, Stones2 (hinten) */
    background-image: 
			url("Balloon.png"), 
        url("Stones1.png"), 
        url("Island.png"), 
        url("Sun.png"),
        url("Stones2.png");

    /* Größen für Desktop */
    background-size: 
		15% auto,  /* Balloon */
        25% auto,  /* Stones1 */
        40% auto,  /* Island */
        20% auto,  /* Sun */
        45% auto;  /* Stones2 */
    
    background-repeat: no-repeat;

    /* Positionen für Desktop */
    background-position: 
	/* Balloon 1: Ganz unten mit Puffer */
        calc(25% + var(--move-x) * 0.12) calc(80% + var(--move-y) * 0.14),
		
        /* Stones 1: Ganz unten mit Puffer */
        calc(50% + var(--move-x) * 0.06) calc(100% + 20px + var(--move-y) * 0.05),
		
        /* Island: Mittig */
        calc(50% + var(--move-x) * 0.03) calc(50% + var(--move-y) * 0.03),

        /* Sun: Oben rechts im Himmel */
        calc(70% + var(--move-x) * 0.01) calc(30% + var(--move-y) * 0.01),

        /* Stones 2: Ganz unten im Hintergrund */
        calc(50% + var(--move-x) * 0.06) calc(100% + 20px + var(--move-y) * 0.06);
}


/* 4. OPTIMIERUNG FÜR MOBILE GERÄTE (Smartphone Hochkant) */
@media (max-width: 767px) {
    #parallax {
        /* Bilder auf schmalen Schirmen größer machen */
        background-size: 
			25% auto,  /* Balloon */
            60% auto,  /* Stones1 */
            75% auto,  /* Island */
            35% auto,  /* Sun */
            75% auto;  /* Stones2 */

        /* Vertikale Abstände am Handy verringern (kompakteres Layout) */
        background-position: 
					  /* Balloon 1: Höher ziehen, damit sie sichtbar bleiben */
            calc(20% + var(--move-x) * 0.12) calc(80% + 10px + var(--move-y) * 0.14),
			
            /* Stones 1: Höher ziehen, damit sie sichtbar bleiben */
            calc(50% + var(--move-x) * 0.06) calc(92% + var(--move-y) * 0.05),
			
            /* Island: Bleibt im Fokus */
            calc(50% + var(--move-x) * 0.03) calc(50% + var(--move-y) * 0.03),

            /* Sun: Tiefer in den Himmel rücken (näher an die Insel) */
            calc(70% + var(--move-x) * 0.01) calc(28% + var(--move-y) * 0.01),

            /* Stones 2: Dichter unter die Insel schieben */
            calc(50% + var(--move-x) * 0.06) calc(100% + var(--move-y) * 0.06);
    }
}