@keyframes tizianFarbwechsel {
    0% {
        hsla( 0, 100%, 50%, 0.7);
    }
    25% {  hsla(100, 100%, 50%, 0.7);

    }
    50% {  hsla(200, 100%, 50%, 0.7);

    }
    100% {  hsla(140, 100%, 50%, 0.7); }
}

button#arbuh {

    background: #111;
    color: lightblue;
    border-radius: 8px;
    border: 2px solid darkgrey;
}

button#arbuhVideo {
    background: #111111;
    color: lightblue;
    border-radius: 8px;
    border: 2px solid darkgrey;
}

* {
    box-sizing: border-box;
}

img.qr {
top: unset;
z-index: -1;
position: relative;
width: 10%;
height: auto;
background-size: cover;
left: 40%;
}

img {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
top: -200px;
}

body {
    font-family: sans-serif;
}

.scene {
    width: 200px;
    height: 200px;
    border: 0px solid #CCC;
    margin: 80px;
    perspective: 400px;
}
.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transition: transform 1s;
}

.cube.show-front {
    transform: translateZ(-100px) rotateY( 0deg);
}

.cube.show-right {
    transform: translateZ(-100px) rotateY( -90deg);
}

.cube.show-back {
    transform: translateZ(-100px) rotateY(-180deg);
}

.cube__face {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 0px solid black;
    line-height: 200px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.cube__face--front {
    background-image: url('Images/512x512.jpg');
    background-size: cover;
}

.cube__face--right {
    background: #44444450;
}

.cube__face--back {
    background: #44444450;
}

.cube__face--left {
    background: #33434350;
}

.cube__face--top {
    background: #44344350;
}

.cube__face--bottom {
    background: #54354350;
}

.cube__face--front {
    transform: rotateY( 0deg) translateZ(100px);
}

.cube__face--right {
    transform: rotateY( 90deg) translateZ(100px);
}

.cube__face--back {
    transform: rotateY(180deg) translateZ(100px);
}

.cube__face--left {
    transform: rotateY(-90deg) translateZ(100px);
}

.cube__face--top {
    transform: rotateX( 90deg) translateZ(100px);
}

.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(100px);

}

label {
    margin-right: 10px;
}


.cube.show-left {
    transform: translateZ(-100px) rotateY( 90deg);
}

.cube.show-top {
    transform: translateZ(-100px) rotateX( -90deg);
}

.cube.show-bottom {
    transform: translateZ(-100px) rotateX( 90deg);
}