.lists {
            width: 100%;
            display: flex;
            gap: 20px;
            justify-content: space-between;
            /* align-items: flex-start; Wenn du willst, dass das Menü in der Länge nicht mit dem Content-Block mitwächst. Ich empfehle dir, *hier dann das padding einzufügen, damit es nicht mit dem letzten Strich endet. */
        }
        
        /*         Menu        */
        
        .lists_menu {
            width: 20%;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #0f0f0f;
            align-items: flex-start;
        /* padding-bottom: 10px; * Hier nutzen, wenn du nicht willst, dass das Menü dieselbe Länge hat wie der Content-Block. */
        }
        
        .lists_menu-head {
            height: 50px;
            width: 100%;
            background: #0b0b0b;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            text-transform: uppercase;
        }
        
        .lists_menu-item {
            height: 25px;
            width: 90%;
            margin: 0 auto;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 1px solid #500a08;
        }
        
        
        /*         Content       */
        
        
        .lists_content {
            width: 100%;
            box-sizing: border-box;
            background: #0f0f0f;

        }
        
        .lists_content-head {
            height: 50px;
            width: 100%;
            background: #0b0b0b;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            text-transform: uppercase;
        }
        
        .lists_content-description {
            padding: 20px 10px;
            text-align: justify;
            line-height: 180%;
        }
        
        .lists_content-bit {    
            padding: 0 10px 40px 10px;
            display: flex;
            flex-wrap: wrap;

        }
        
        .lists_content-block {
            width: 50%;    /* Wenn du drei Spalten willst, gib hier 30% an. Beachte, dass du diesen Wert je nach Breite des Forums und des Inhalts anpassen musst, um ein zufriedenstellendes Ergebnis zu erhalten. */
        }
        
        .lists_content-item {
            margin-bottom: 5px;
        }

.AddQuest  { float:left;
	font-size: 80px; 
	text-align:center; 
	opacity: 0.5;
	color: #fff;}

.AddQuest  i{ 
	font-size: 150px; 
	text-align:center; 
	color: #000; 
margin-top: 20px;
margin-left: 35px;
position: absolute;}

.FlipQuest  { float:left;
	font-size: 80px; 
	text-align:center; 
	opacity: 0.3;
	color: #fff;}

.FlipQuest  i{ 
	font-size: 150px; 
	text-align:center; 
	color: #fff; 
margin-top: 10px;
margin-left: 30px;
position: absolute;}

.questing{
width:220px;
height:220px;
margin-left: 20px;
margin-bottom: 20px;
text-align:center;
position:relative;
	float:left;
}
.questing img{
width:220px;
}

.imgQuesting{
width:220px;
height:220px;
position:absolute;
top:0;
	opacity: 0.8;
background:#24243d;
  
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:5;
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		line-height:225px;
}
.questing:hover .imgQuesting{
-webkit-transform:perspective(2000px) rotateX(180deg);
   -moz-transform:perspective(2000px) rotateX(180deg);
    -ms-transform:perspective(2000px) rotateX(180deg);
     -o-transform:perspective(2000px) rotateX(180deg);
        transform:perspective(2000px) rotateX(180deg);
  
z-index:-5;
}
.Questing{
z-index:-3;
position:absolute;
top:0;
width:220px;
height:220px;
background:#0b0b0b;
-webkit-transform:perspective(2000px) rotateX(-180deg);
   -moz-transform:perspective(2000px) rotateX(-180deg);
    -ms-transform:perspective(2000px) rotateX(-180deg);
     -o-transform:perspective(2000px) rotateX(-180deg);
        transform:perspective(2000px) rotateX(-180deg);
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		
color:#dad5c7;
text-align:center;
line-height:225px;
padding:4px;
}

.questing:hover .Questing{
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:7;
}

.imgChoice{
width:220px;
height:220px;
position:absolute;
top:0;
	opacity: 0.8;
background:#263d24;
  
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:5;
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		line-height:225px;
}
.questing:hover .imgChoice{
-webkit-transform:perspective(2000px) rotateX(180deg);
   -moz-transform:perspective(2000px) rotateX(180deg);
    -ms-transform:perspective(2000px) rotateX(180deg);
     -o-transform:perspective(2000px) rotateX(180deg);
        transform:perspective(2000px) rotateX(180deg);
  
z-index:-5;
}
.Choice{
z-index:-3;
position:absolute;
top:0;
width:220px;
height:220px;
background:#0b0b0b;
-webkit-transform:perspective(2000px) rotateX(-180deg);
   -moz-transform:perspective(2000px) rotateX(-180deg);
    -ms-transform:perspective(2000px) rotateX(-180deg);
     -o-transform:perspective(2000px) rotateX(-180deg);
        transform:perspective(2000px) rotateX(-180deg);
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		
color:#dad5c7;
text-align:center;
line-height:225px;
padding:4px;
}

.questing:hover .Choice{
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:7;
}

.imgAppr{
width:220px;
height:220px;
position:absolute;
top:0;
	opacity: 0.8;
background:#3d3424;
  
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:5;
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		line-height:225px;
}
.questing:hover .imgAppr{
-webkit-transform:perspective(2000px) rotateX(180deg);
   -moz-transform:perspective(2000px) rotateX(180deg);
    -ms-transform:perspective(2000px) rotateX(180deg);
     -o-transform:perspective(2000px) rotateX(180deg);
        transform:perspective(2000px) rotateX(180deg);
  
z-index:-5;
}
.Appr{
z-index:-3;
position:absolute;
top:0;
width:220px;
height:220px;
background:#0b0b0b;
-webkit-transform:perspective(2000px) rotateX(-180deg);
   -moz-transform:perspective(2000px) rotateX(-180deg);
    -ms-transform:perspective(2000px) rotateX(-180deg);
     -o-transform:perspective(2000px) rotateX(-180deg);
        transform:perspective(2000px) rotateX(-180deg);
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		
color:#dad5c7;
text-align:center;
line-height:225px;
padding:4px;
}

.questing:hover .Appr{
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:7;
}
.imgReach{
width:220px;
height:220px;
position:absolute;
top:0;
	opacity: 0.8;
background:#3d2426;
  
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:5;
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		line-height:225px;
}
.questing:hover .imgReach{
-webkit-transform:perspective(2000px) rotateX(180deg);
   -moz-transform:perspective(2000px) rotateX(180deg);
    -ms-transform:perspective(2000px) rotateX(180deg);
     -o-transform:perspective(2000px) rotateX(180deg);
        transform:perspective(2000px) rotateX(180deg);
  
z-index:-5;
}
.Reach{
z-index:-3;
position:absolute;
top:0;
width:220px;
height:220px;
background:#0b0b0b;
-webkit-transform:perspective(2000px) rotateX(-180deg);
   -moz-transform:perspective(2000px) rotateX(-180deg);
    -ms-transform:perspective(2000px) rotateX(-180deg);
     -o-transform:perspective(2000px) rotateX(-180deg);
        transform:perspective(2000px) rotateX(-180deg);
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		
color:#dad5c7;
text-align:center;
line-height:225px;
padding:4px;
}

.questing:hover .Reach{
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:7;
}

.ModQuest  { float:left;
	font-size: 80px; 
	text-align:center; 
	opacity: 0.5;
	color: #fff;}

.ModQuest  i{ 
	font-size: 150px; 
	text-align:center; 
	color: #fff; 
margin-top: -5px;
margin-left: 15px;
position: absolute;}

.FlipMod  { float:left;
	font-size: 80px; 
	text-align:center; 
	opacity: 0.3;
	color: #fff;}

.FlipMod  i{ 
	font-size: 150px; 
	text-align:center; 
	color: #fff; 
margin-top: -5px;
margin-left: 10px;
position: absolute;}

.imgNew{
width:300px;
height:150px;
position:absolute;
top:0;
	opacity: 0.8;
background:#a30007;
  
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:5;
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		line-height:225px;
}
.questing:hover .imgNew{
-webkit-transform:perspective(2000px) rotateX(180deg);
   -moz-transform:perspective(2000px) rotateX(180deg);
    -ms-transform:perspective(2000px) rotateX(180deg);
     -o-transform:perspective(2000px) rotateX(180deg);
        transform:perspective(2000px) rotateX(180deg);
  
z-index:-5;
}
.New{
z-index:-3;
position:absolute;
top:0;
width:300px;
height:150px;
background:#0b0b0b;
-webkit-transform:perspective(2000px) rotateX(-180deg);
   -moz-transform:perspective(2000px) rotateX(-180deg);
    -ms-transform:perspective(2000px) rotateX(-180deg);
     -o-transform:perspective(2000px) rotateX(-180deg);
        transform:perspective(2000px) rotateX(-180deg);
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		
color:#dad5c7;
text-align:center;
line-height:225px;
padding:4px;
}

.questing:hover .New{
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:7;
}

.imgAll{
width:300px;
height:150px;
position:absolute;
top:0;
	opacity: 0.8;
background:#a30007;
  
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:5;
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		line-height:225px;
}
.questing:hover .imgAll{
-webkit-transform:perspective(2000px) rotateX(180deg);
   -moz-transform:perspective(2000px) rotateX(180deg);
    -ms-transform:perspective(2000px) rotateX(180deg);
     -o-transform:perspective(2000px) rotateX(180deg);
        transform:perspective(2000px) rotateX(180deg);
  
z-index:-5;
}
.All{
z-index:-3;
position:absolute;
top:0;
width:300px;
height:150px;
background:#0b0b0b;
-webkit-transform:perspective(2000px) rotateX(-180deg);
   -moz-transform:perspective(2000px) rotateX(-180deg);
    -ms-transform:perspective(2000px) rotateX(-180deg);
     -o-transform:perspective(2000px) rotateX(-180deg);
        transform:perspective(2000px) rotateX(-180deg);
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		
color:#dad5c7;
text-align:center;
line-height:225px;
padding:4px;
}

.questing:hover .All{
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:7;
}

.imgDone{
width:300px;
height:150px;
position:absolute;
top:0;
	opacity: 0.8;
background:#a30007;
  
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:5;
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		line-height:225px;
}
.questing:hover .imgDone{
-webkit-transform:perspective(2000px) rotateX(180deg);
   -moz-transform:perspective(2000px) rotateX(180deg);
    -ms-transform:perspective(2000px) rotateX(180deg);
     -o-transform:perspective(2000px) rotateX(180deg);
        transform:perspective(2000px) rotateX(180deg);
  
z-index:-5;
}
.Done{
z-index:-3;
position:absolute;
top:0;
width:300px;
height:150px;
background:#0b0b0b;
-webkit-transform:perspective(2000px) rotateX(-180deg);
   -moz-transform:perspective(2000px) rotateX(-180deg);
    -ms-transform:perspective(2000px) rotateX(-180deg);
     -o-transform:perspective(2000px) rotateX(-180deg);
        transform:perspective(2000px) rotateX(-180deg);
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
		
color:#dad5c7;
text-align:center;
line-height:225px;
padding:4px;
}

.questing:hover .Done{
-webkit-transform:perspective(2000px) rotateX(0deg);
   -moz-transform:perspective(2000px) rotateX(0deg);
    -ms-transform:perspective(2000px) rotateX(0deg);
     -o-transform:perspective(2000px) rotateX(0deg);
        transform:perspective(2000px) rotateX(0deg);
z-index:7;
}