/* Hintergrund-Elemente ---------------------------------- */
:root {
    --figur-right-start: calc(var(--vh, 1vh) * -2);   /* Basis für sehr breite Screens */
    --figur-bottom: calc(var(--vh, 1vh) * 26);
}

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

    right: var(--figur-right-start);
    bottom: var(--figur-bottom);

    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) * 3));
    }
}

/* --- 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) * 5));
    }
}

/* --- 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) * 7));
    }
}

/* --- 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) * 8));
    }
}

/* --- 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) * 9));
    }
}

@media (max-height: 330px) {  /* ≈1.2 */
    #wald-hintergrund-figur-wrapper {
        right: calc(var(--figur-right-start) - calc(var(--vh, 1vh) * 0));
    }
}


/* End Hintergrund-Elemente -------------------------------- */


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


#Hexe {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(16%, -27%);
    width: auto;
    height: 54%;
	opacity: 0;
}
/* 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;
}

#Hexe2 {
	position: absolute;
    top: calc(var(--vh, 1vh) * 32);
    left: 8vw;
    transform: translate(50%, -50%);
    opacity: 0;
	
	width: 50%;
	height: 52%;
	
	background-image: url('../images/kl_3/Bravo/Hexe.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%;
    /* border: 2px solid white; */
    background-image: url(../images/kl_3/Geschafft/Hexe.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 47% 0 53%;
    margin-top: 4%;
	
	pointer-events:none; /* wegen performance! */
}
/* End Uebung Hintergrund ------------------------------ */