html {
    width: 100%;
    height: 100%;
}

body {
    background-image: url("images2/5WWU.gif"), url("images2/Screenshot 2024-09-26 123824.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center;
    overflow:  hidden;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
}

h1 {
    color: white;
    position: absolute;
    top: 0;
}

p {
    -webkit-text-stroke-width: 1px;
    font-weight: bold;
    -webkit-text-stroke-color: white;
    font-size: 2rem;
}


#Tuerchen1 {
    left: 20%;
    top: 32%;
}

#aussen1 {
    transform-origin: left;
    right: -2%;
    bottom: -1%;
}


.opened1 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}




#Tuerchen2 {
    right: 30%;
    top: 60%;
}

#aussen2 {
    transform-origin: left;
    left: -2%;
    bottom: -3%;
}


.opened2 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen3 {
    left: 20%;
    bottom: 10%;
}

#aussen3 {
    transform-origin: bottom;
    left: -2%;
    bottom: -2%;
}

.opened3 {
    height: 100%;
    width: 100%;
    transform: rotateX(-130deg);
    transform-style: preserve-3d;
    transform-origin: bottom;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#back3 {
    rotate: 180deg;
}

#Tuerchen4 {
    left: 40%;
    top: 9%;
}

#aussen4 {
    transform-origin: left;
    left: -2%;
    bottom: -1%;
}


.opened4 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen5 {
    right: 1%;
    bottom: 5%;
}

#aussen5 {
    transform-origin: left;
    left: -2%;
    bottom: -3%;
}


.opened5 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen6 {
    right: 1%;
    top: 12%;
}

#aussen6 {
    transform-origin: bottom;
    left: -2%;
    bottom: -2%;
}


.opened6 {
    height: 100%;
    width: 100%;
    transform: rotateX(-130deg);
    transform-style: preserve-3d;
    transform-origin: bottom;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


#back6 {
    rotate: 180deg;
}


#Tuerchen7 {
    left: 15%;
    top: 55%;
}

#aussen7 {
    transform-origin: right;
    left: -3%;
    bottom: -2%;
}


.opened7 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen8 {
    right: 50%;
    bottom: 3%;
}

#aussen8 {
    transform-origin: right;
    left: -2%;
    bottom: -3%;
}


.opened8 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen9 {
    top: 25%;
    right: 20%;
}

#aussen9 {
    transform-origin: right;
    left: -2%;
    bottom: -3%;
}


.opened9 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen10 {
    left: 17%;
    top: 12%;
}

#aussen10 {
    transform-origin: right;
    left: -2%;
    bottom: -2%;
}


.opened10 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen11 {
    bottom: 40%;
    right: 0.5%;
}

#aussen11 {
    transform-origin: left;
    left: -3%;
    bottom: -3%;
}

.opened11 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


#Tuerchen12 {
    bottom: 30%;
    left: 1%;
}

#aussen12 {
    transform-origin: bottom;
    left: -2%;
    bottom: -2%;
}


.opened12 {
    height: 100%;
    width: 100%;
    transform: rotateX(-130deg);
    transform-style: preserve-3d;
    transform-origin: bottom;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#back12 {
    rotate: 180deg;
}


#Tuerchen13 {
    top: 35%;
    right: 45%;
}

#aussen13 {
    transform-origin: right;
    left: -2%;
    bottom: -2%;
}


.opened13 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen14 {
    bottom: 5%;
    right: 30%;
}

#aussen14 {
    transform-origin: right;
    left: -3%;
    bottom: -3%;
}


.opened14 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


#Tuerchen15 {
    left: 1%;
    bottom: 5%;
}


#aussen15 {
    transform-origin: right;
    left: -2%;
    bottom: -2%;
}


.opened15 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen16 {
    left: 35%;
    bottom: 15%;
}

#aussen16 {
    transform-origin: left;
    left: -3%;
    bottom: -2%;
}


.opened16 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


#Tuerchen17 {
    bottom: 25%;
    right: 12%;
}

#aussen17 {
    transform-origin: left;
    left: -4%;
    bottom: -3%;
}


.opened17 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


#Tuerchen18 {
    left: 35%;
    top: 30%;
}

#aussen18 {
    transform-origin: bottom;
    left: -2%;
    bottom: -2%;
}


.opened18 {
    height: 100%;
    width: 100%;
    transform: rotateX(-130deg);
    transform-style: preserve-3d;
    transform-origin: bottom;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#back18 {
    rotate: 180deg;
}


#Tuerchen19 {
    bottom: 18%;
    right: 43%;
}

#aussen19 {
    transform-origin: left;
    left: -4%;
    bottom: -2%;
}


.opened19 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen20 {
    top: 10%;
    right: 35%;
}

#aussen20 {
    transform-origin: right;
    left: -3%;
    bottom: -2%;
}


.opened20 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


#Tuerchen21 {
    bottom: 36%;
    left: 38%;
}

#aussen21 {
    transform-origin: left;
    left: -2%;
    bottom: -3%;
}


.opened21 {
    height: 100%;
    width: 100%;
    transform: rotateY(-130deg);
    transform-style: preserve-3d;
    transform-origin: left;
    bottom: -4%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen22 {
    left: 1%;
    top: 35%;
}

#aussen22 {
    transform-origin: right;
    left: -2%;
    bottom: -2%;
}


.opened22 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}

#Tuerchen23 {
    top: 10%;
}

#aussen23 {
    transform-origin: right;
    left: -3%;
    bottom: -3%;
}

.opened23 {
    height: 100%;
    width: 100%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


#Tuerchen24 {
    right: 25%;
    top: 43%;
}

#aussen24 {
    transform-origin: right;
    bottom: -2%;
    right: -1%;
}


.opened24 {
    height: 99%;
    width: 99%;
    transform: rotateY(130deg);
    transform-style: preserve-3d;
    transform-origin: right;
    bottom: -3%;
    box-shadow: 4px 2px 11px -3px black;
}


.front {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.aussen {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 5px;
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;
    border: 3px solid red;
}

.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0, 56, 139, 0.93);
    color: white;
    font-size: 1.5rem;
    transform: rotateY(180deg);
    height: 100%;
    width: 100%;
}


.TuerchenA {
    border: 3px solid red;
    width: 5%;
    height: 10%;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    perspective: 500px;
    background-color: rgba(0, 56, 139, 0.93);
    background-position: center;
    background-repeat: no-repeat;
}

.TuerchenB {
    border: 3px solid red;
    width: 7.5%;
    height: 10%;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    perspective: 500px;
    background-color: rgba(0, 56, 139, 0.93);
    background-position: center;
    background-repeat: no-repeat;
}

.TuerchenC {
    border: 3px solid red;
    width: 6%;
    height: 12.5%;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    perspective: 500px;
    background-color: rgba(0, 56, 139, 0.93);
    background-position: center;
    background-repeat: no-repeat;
}

.general {
    text-align: center;
    height: 92%;
    position: absolute;
    bottom: 0;
    top: 7%;
    left: 0;
    right: 0;
}

.frame {
    max-width: 1920px;
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
}



.TuerchenA:hover {
    transform: scale(1.16);
}

.TuerchenC:hover {
    transform: scale(1.16);
}

.TuerchenB:hover {
    transform: scale(1.1);
}

div, a {
    transition: 1s;
}

.name1 {
    rotate: -60deg;
    position: absolute;
    top: 40%;
    left: -3%;
    font-size: 70%;
    width: 100%;
}

.name2 {
    rotate: -45deg;
    position: absolute;
    top: 30%;
    left: 0;
    font-size: 90%;
    width: 100%;
    text-align: center;

}

.name3 {
    rotate: -45deg;
    position: absolute;
    top: 40%;
    left: 0;
    font-size: 80%;
    width: 100%;
}

ul {
    list-style-type: none;
    overflow: hidden;
    z-index: 0;
    padding-right: 3%;
}

li {
    float: right;
    bottom: 5%;
    font-size: 100%;
    margin-bottom: 5%;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    top: 0;
    border: 2px solid black;
    border-radius: 5px;
    background-color: rgba(255, 0, 0, 0.45)
}

li a:hover {
    background-color: rgba(255, 0, 0, 0.76);
    top: 0;
    transform: scale(1.05);
    border-radius: 10px;
}

#santaklaus {
    position: absolute;
    left: -57%;
    bottom: -15%;
    rotate: 25deg;
    height: 50%;
}

#sprechblase {
    position: absolute;
    height: 25%;
    left: -42%;
    bottom: 30%;
}

#links {
    position: absolute;
    left: -36%;
    bottom: 36%;
    color: black;
    -webkit-text-stroke-color: black;
}

#rudolf {
    position: absolute;
    right: -50%;
    bottom: -5%;
    height: 50%;
}

#rudolf:hover ~ .hidden {
    opacity: 1;
    transition: all 1s ease-in-out;
}

.hidden {
    opacity: 0;
    position: absolute;
    right: -40%;
    bottom: 57%;
    color: white;
    border: 3px solid red;
    border-radius: 3px;
    font-size: 2rem;
}

.gewinn {
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: 1s all;
    opacity: 0;
    background-size: contain;
}