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

@media (max-height: 687px) and (max-width: 580px) {
	:root {
	  --figur-right-base: calc(-2 * var(--vh, 1vh));
	}
}

@media (max-height: 360px) and (max-width: 900px) {
	:root {
	  --figur-right-base: calc(-0 * var(--vh, 1vh));
	}
}

/* Default: sehr breite Screens */
#wald-hintergrund-figur-wrapper {
  position: absolute;
  width:  calc(27 * var(--vh, 1vh));
  height: auto;

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

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

#wald-hintergrund-figur img {
  width: 100%;
  height: auto;
  display: block;
}

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

/* bis 16:9 */
@media (max-aspect-ratio: 16/9) {
  #wald-hintergrund-figur-wrapper {
    right: calc(var(--figur-right-base) - (5 * var(--vh, 1vh)));
  }
}

/* bis 16:10 */
@media (max-aspect-ratio: 16/10) {
  #wald-hintergrund-figur-wrapper {
    right: calc(var(--figur-right-base) - (7 * var(--vh, 1vh)));
  }
}

/* bis 4:3 */
@media (max-aspect-ratio: 4/3) {
  #wald-hintergrund-figur-wrapper {
    right: calc(var(--figur-right-base) - (6 * var(--vh, 1vh)));
  }
}

/* bis 6:5 */
@media (max-aspect-ratio: 6/5) {
  #wald-hintergrund-figur-wrapper {
    right: calc(var(--figur-right-base) - (3 * var(--vh, 1vh)));
  }
}
/* Ende Hintergrund-Elemente ------------------------------- */


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

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

#Riese2 {
    position: absolute;
    top: 55%;            /* etwas unter der Mitte, damit der Kopf nicht abgeschnitten wird */
    left: 50%;
    transform: translate(-50%, -50%);  /* <<< WICHTIG: Minus! */

    opacity: 0;

    width: 40%;          /* weniger breit, damit scale 1.5 nicht zu riesig wird */
    height: 50%;

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