/* Hintergrund-Elemente ---------------------------------- */
:root {
    --figur-right-start: -0vh;   /* Basis für sehr breite Screens */
    --figur-bottom: 45vh;
}


/* --- 1) Sehr breite Screens (z.B. 16:9 / 1.78+) --- */
/* Default */
#wald-hintergrund-figur-wrapper {
    position: absolute;
    width: calc(var(--vh) * 37);
    height: auto;

    right: calc(var(--vh) * 0);
    bottom: calc(var(--vh) * 45);

    pointer-events: none;
    z-index: 0;
}

@media (max-aspect-ratio: 19/9) {
    #wald-hintergrund-figur-wrapper {
        right: calc(var(--figur-right-start) - calc(var(--vh, 1vh) * 8));
    }
}

/* --- 2) bis 16:9 (1.78) → Standard Laptops/Monitore --- */
@media (max-aspect-ratio: 16/9) {
    #wald-hintergrund-figur-wrapper {
        right: calc(var(--figur-right-start) - calc(var(--vh, 1vh) * 10));
    }
}

/* --- 3) bis 16:10 (1.6) → MacBooks, Galaxy Tabs, viele Notebooks --- */
@media (max-aspect-ratio: 16/10) {
    #wald-hintergrund-figur-wrapper {
        right: calc(var(--figur-right-start) - calc(var(--vh, 1vh) * 10));
    }
}

/* --- 4) bis 4:3 (1.333) → iPads (10.2, 10.9, 11, 12.9) --- */
@media (max-aspect-ratio: 4/3) {
    #wald-hintergrund-figur-wrapper {
        right: calc(var(--figur-right-start) - calc(var(--vh, 1vh) * 12));
    }
}

/* --- 5) bis 1.2 (fast quadratisch Landscape) → selten, aber gut zu haben --- */
@media (max-aspect-ratio: 6/5) {  /* ≈1.2 */
    #wald-hintergrund-figur-wrapper {
        right: calc(var(--figur-right-start) - calc(var(--vh, 1vh) * 14));
    }
}
/* End Hintergrund-Elemente -------------------------------- */


/* Geschafft Elemente -------------------------------------- */
#schwarze_elfe {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(16%, -27%);
    width: auto;
    height: 54%;
	opacity: 0;
}

#elfe {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(16%, -27%);
    width: auto;
    height: 54%;
	opacity: 0;
}

#schmetterling-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px; /* Anpassbar nach Bedarf */
    height: 100px; /* Anpassbar nach Bedarf */
}

#schmetterling {
    width: 100%;
    height: 100%;
}
/* End Geschafft Elemente ---------------------------------- */


/* bravo Elemente ---------------------------------- */
#bravoWrapper {
	position: relative;
	width: 100%;
	height: calc(var(--vh, 1vh) * 100);
	background-color: #ABE268;
}

#bravo_inner_wrapper {
	display: flex;
	width: auto;
	height: calc(var(--vh, 1vh) * 100);
	flex-flow: row nowrap;
    justify-content: center;
}

#background_bravo {
	position: relative;
	height: calc(var(--vh, 1vh) * 100);
    width: auto;
}

#bravo_text {
	position: absolute;
	width: auto; 
	height: 100%;
	opacity: 1;
	visibility: inherit;
}


#elfe2 {
	position: absolute;
    top: calc(var(--vh, 1vh) * 32);
    left: 0.5vw;
    transform: translate(50%, -50%);
    opacity: 0;
	
	width: 50%;
	height: 52%;
	
	background-image: url('../images/Geschafft/Elfe.png');
    background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;

}

/*
#elfe2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px; 
    height: 100%; 
    background-color: white;
}
*/

.star {
    position: absolute;
    width: 4%;
    height: 4%;
    /* background-color: yellow; */
    border-radius: 50%;
    top: 23%;
    left: 48.5%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

@media screen and (min-aspect-ratio: 16/11) {
   .star {
		
		top: 23%;
		left: 49%;
		
	}
}

@media screen and (min-aspect-ratio: 16/8) {
   .star {
		top: 23%;
		left: 49.3%;
	}
}

#star1 {
	background-image: url("../images/Bravo/Sterne/Stern_1.png");
	background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;
}
#star2 {
	background-image: url("../images/Bravo/Sterne/Stern_2.png");
	background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;
}
#star3 {
	background-image: url("../images/Bravo/Sterne/Stern_3.png");
	background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;
}
#star4 {
	background-image: url("../images/Bravo/Sterne/Stern_4.png");
	background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;
}
#star5 {
	background-image: url("../images/Bravo/Sterne/Stern_5.png");
	background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;
}
#star6 {
	background-image: url("../images/Bravo/Sterne/Stern_6.png");
	background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;
}
#star7 {
	background-image: url("../images/Bravo/Sterne/Stern_7.png");
	background-size: contain; /* Alternativ: cover */
    background-position: center;
    background-repeat: no-repeat;
}
/* End bravo Elemente ---------------------------------- */


/* Uebung Hintergrund ---------------------------------- */

.uebung_hintergrund_figur {
	width: 14%;
    height: 32%;
	background-image: url(../images/kl_1/Geschafft/Elfe.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 47% 0 53%;
    margin-top: 4%;
	
	pointer-events:none;
}

@media (min-aspect-ratio: 1189 / 560) {
	.uebung_hintergrund_figur {
    	margin-top: 3%;
	}
}

/* End Uebung Hintergrund ------------------------------ */

/* Uebung Hintergrund ---------------------------------- */
/*
.uebung_hintergrund_figur {
	position: absolute;
	
	left: 51%;
    bottom: 61%;
    width: 14%;
    height: 32%;
 
	background-image: url(../images/kl_1/Geschafft/Elfe.png);
    background-repeat: no-repeat;
    background-size: contain;
	
	pointer-events:none;
}
*/
/* End Uebung Hintergrund ------------------------------ */