/* Hintergrund-Elemente ----------------------------------*/
#wald-hintergrund-figur-wrapper {
    position: absolute;
    width: calc(var(--vh, 1vh) * 23);        /* oder min( calc(var(--vh, 1vh) * 10), 10vw) */
    height: auto;       /* Höhe ergibt sich durchs Bild */

	right: clamp(
	  calc(var(--vh, 1vh) * -10),
	  calc(
		(var(--vh, 1vh) * -10) + ((100vw - calc(var(--vh, 1vh) * 100)) / 20)
	  ),
	  calc(var(--vh, 1vh) * 20)
	);
	/* etwas nach rechts: right: clamp(- calc(var(--vh, 1vh) * 12), calc(- calc(var(--vh, 1vh) * 12) + ((100vw - calc(var(--vh, 1vh) * 100)) / 20)), calc(var(--vh, 1vh) * 20)); */
	/* oder right: clamp(- calc(var(--vh, 1vh) * 14), calc(- calc(var(--vh, 1vh) * 14) + ((100vw - calc(var(--vh, 1vh) * 100)) / 20)), calc(var(--vh, 1vh) * 20)); */
	
    bottom: calc(var(--vh, 1vh) * 28);       /* fixer Abstand vom unteren Rand */

    pointer-events: none; /* damit er Klicks nicht blockiert */
    z-index: 0;
}

@media (max-height: 360px) {
    #wald-hintergrund-figur-wrapper {
        right: calc(var(--vh, 1vh) * 4);
    }
}

#wald-hintergrund-figur img {
    width: 100%;
    height: auto;
    display: block; /* verhindert unerwünschte Lücken */
}


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


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

#Troll {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(16%, -27%) scale(0.8);
    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;
}

#Troll2 {
	position: absolute;
    top: calc(var(--vh, 1vh) * 32);
    left: 0.5vw;
    transform: translate(50%, -50%) scale(0.8); ;
    opacity: 0;
	
	width: 50%;
	height: 52%;
	
	background-image: url('../images/kl_4/Geschafft/Troll.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_4/Geschafft/Troll.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 47% 0 53%;
    margin-top: 4%;
	
	pointer-events:none; /* wegen performance! */
}
/* End Uebung Hintergrund ------------------------------ */