:root {
    --figur-right-start: calc(var(--vh, 1vh) * 7);
    --figur-bottom:      calc(var(--vh, 1vh) * 30);
}

/* --- 1) Sehr breite Screens (z.B. 16:9 / 1.78+) --- */
/* Default */
#wald-hintergrund-figur-wrapper {
    position: absolute;
    width: calc(var(--vh, 1vh) * 13);
    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));
    }
}
/* End Hintergrund-Elemente -------------------------------- */


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

#Zwerg {
	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;
}

#Zwerg2 {
	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/kl_2/Geschafft/Zwerg.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_2/Geschafft/Zwerg.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 47% 0 53%;
    margin-top: 4%;
	
	pointer-events:none; /* wegen performance! */
}
/* End Uebung Hintergrund ------------------------------ */