/* 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(-10 * var(--vh, 1vh)),
	  calc(
		(-10 * var(--vh, 1vh)) +
		((100vw - (100 * var(--vh, 1vh))) / 20)
	  ),
	  calc(20 * var(--vh, 1vh))
	);	
	
    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: 687px) and (max-width: 580px) {
	:root {
	  --figur-right-base: calc(-0 * var(--vh, 1vh));
	}
}

@media (min-aspect-ratio: 20/10) and (max-height: 450px) {
  /*
  right: clamp(
	  calc(-10 * var(--vh, 1vh)),        
	  calc(
		(-10 * var(--vh, 1vh)) +
		((100vw - (100 * var(--vh, 1vh))) / 20)
	  ),                                
	  calc(20 * var(--vh, 1vh))          
	);
	*/
	#wald-hintergrund-figur-wrapper {
		right: clamp(
		  calc(-7 * var(--vh, 1vh)),   /* war -10 */
		  calc(
			(-7 * var(--vh, 1vh)) +
			((110vw - (100 * var(--vh, 1vh))) / 15)
		  ),
		  calc(20 * var(--vh, 1vh))
		);
	}
}

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


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


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

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

#Kobold2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 30%;
    height: 31%;
    opacity: 0;

    background-image: url('../images/kl_5/Bravo/Kobold.png');
    background-size: contain;
    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_5/Geschafft/Kobold.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 47% 0 53%;
    margin-top: 4%;
	
	pointer-events:none; /* wegen performance! */
}
/* End Uebung Hintergrund ------------------------------ */