.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: var(--hintergrund2);
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: 35px;
 width: 100%;
 background: var(--akzent3);
 color: var(--hintergrund2);
 display: flex;
 justify-content: center;
 align-items: center;
 font-weight: bold;
 text-transform: uppercase;}

.lists_content-block h2{height: 35px;width: 100%;background: var(--akzent3);color: var(--hintergrund2);display: flex;justify-content: center;align-items: center;font-weight: bold;text-transform: uppercase;}

.lists_menu-head a{
 background: var(--akzent3);
 color: var(--hintergrund2);
}


.lists_menu-item {
        height: 25px;
        width: 95%;
        margin: 0 auto;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid var(--akzent1);
        font-size: 11pt;
        font-family: var(--font-main);}

.lists_menu-item a {
font-family: var(--font-main)
        }
        
        
        /*         Content       */
        
        
.lists_content {
width: 80%;
box-sizing: border-box;
background: var(--hintergrund2);;
        }
        
.lists_content-head {
height: 50px;
width: 100%;
background: var(--akzent3);
color: var(--hintergrund2);
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
text-transform: uppercase;
        }
        
.lists_content-description {
padding: 20px 40px;
text-align: justify;
line-height: 180%;
        }
        
.lists_content-bit {
        padding: 0 0px 20px 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        padding: 0 20px 19px 20px;}

.lists_content-bit form textarea{
	background-color:var(--hintergrund1);
	min-height: 49px;
}

.lists_content-bit form select{
	background-color:var(--hintergrund1);
	min-height: 49px;
}
        
.lists_content-block {
        width: 413px;    
        /* 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;}


/*Jobliste*/

.joblisthead0{
	font-family: var(--font-headline1);
font-size:26px;
padding:15px;
text-align:center;
background-color:var(--akzent3);
color: var(--hintergrund2);
}

.joblistbox1{
 width: 1200px;
 height:auto;
 background-color:var(--hintergrund2);}

.joblistbox2{width: 855px;height: 350px;}

.joblistbox4{width:390px;
height:auto;
float:left;
margin-left:1px;}


.joblisthead1{
 font-family: var(--font-headline1);
 font-size:26px;
 padding: 10px;
 text-align:center;
 background-color: var(--akzent3);
 color: var(--hintergrund2);
 }

.joblistsub{
 background-color: var(--akzent2);
 font-family: var(--font-headline1);
 font-size:13pt;
 height: 25px;
 text-align:center;
 color: var(--hintergrund2);
 padding: 5px;
 }

.jobliststat{
 background-color: var(--akzent2);
 font-family: var(--font-headline1);
 font-size:13pt;
 height:35px;
 text-align:center;
 color: var(--hintergrund2);
 padding:2px;}

.joblistbottombox{
 font-family: var(--font-headline1);
 font-size:26px;
 height:26px;
 padding: 10px;
 text-align:center;
 background-color: var(--akzent3);
 color: var(--hintergrund2);
 }

.joblistpic1{
 width: 120px;
 height: 200px;
 border: 30px solid var(--akzent2);
 /* padding: 5px; */
 background-color: var(--hintergrund2);
 float:left;
 padding: 15px;
 margin: 37px 0px 50px 20px;
 }


.joblistbox3{
 height: 206px;
 width:auto;
 }

.joblisttext1{
 font-family: var(--font-main);
 font-size:12pt;
 text-align:justify;
 background-color:var(--hintergrund2);
 color: var(--font-color);
 height: 55px;
 /* width: 501px; */
 padding: 10px;
 overflow:auto;
 margin-right:20px;
 }

.joblistuser{
  margin-right:20px;
  background-color:var(--hintergrund2);
  /* width: 681px; */
  height: 76px;
  padding: 10px;
  font-family: var(--font-main);
  font-size:11pt;
  overflow:auto;
  text-align: justify;
  }


/*Pärchen*/

.pairinghead1{ var(--font-headline1);
 font-size:26px;
 height:26px;
 padding: 10px;
 text-align:center;
 background-color: var(--akzent3);
	color: var(--hintergrund2);}

/*allgemein*/

.listhead1{ var(--font-headline1);
 font-size:26px;
padding:10px;	
background: var(--akzent3);
color: var(--hintergrund2);
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;}

.listhead2{    
	height: 35px;
    width: 100%;
    background: var(--akzent3);
    color: var(--hintergrund2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
	text-transform: uppercase;}

/*Avaliste*/

.listavatext{
  padding: 5px;
  font-family: var(--font-main);
  font-size: 12pt;
  text-align: justify;
  width:408px;
}

.listavatext a{  var(--font-main);
  font-size:11pt;
}


/*Verwandlungsitems*/

.listsenmain{float:left;
	margin:1px;}

.listsenhead{  
	height: 35px;
    width: 100%;
    background: var(--akzent3);
    color: var(--hintergrund2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
	text-transform: uppercase;}

.listsentext{var(--font-main);
	font-size:11pt;
height:200px;
width: 269px;
padding:5px;
overflow:auto;
text-align:justify;}


/*Elemente*/

.listelemtmain{float: left;
margin: 1px;}

.listelemthead{
	height: 35px;
    width: 100%;
    background: var(--akzent3);
    color: var(--hintergrund2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
	text-transform: uppercase;
}

.listelemttext{
	width: 198px;
    height: 200px;
    overflow: auto;
    font-size: 11pt;
    font-family: var(--font-main);
    text-align: justify;
    padding: 5px;}


/*Ränge*/

.listranghead{ var(--font-headline1);
 font-size:26px;
padding:10px;	
background: var(--akzent3);
color: var(--hintergrund2);
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;}

.listrangmain{float: left;
margin: 1px;}

.listranghead2{
	height: 35px;
	width: 100%;
	background: var(--akzent3);
	color: var(--hintergrund2);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-transform: uppercase;
}

.listrangtext{width: 198px;
    height: 200px;
    overflow: auto;
    font-size: 11pt;
    font-family: var(--font-main);
    text-align: justify;
    padding: 5px;}