.owl-carousel .owl-stage-outer{
	padding:5px;
}

.carousel-card2{
	text-align:center;
background-color:var(--bg);
border-radius:12px;
padding:calc((50% - 0rem) / 2) 1rem;
height:150px;
border:1px solid var(--grey1);
	margin:0 5px;
	width:auto;
}

.owl-nav{
	display:block !important;}

.carousel2 .owl-nav button{
	top:4em;
}

.carousel-card2 p.smalltext{
	text-overflow: ellipsis;
    overflow: hidden;
	white-space: nowrap}

.carousel2 .owl-nav button.owl-prev{
	left:-35px;}

.carousel2 .owl-nav button.owl-next{
	right:-35px;}



.mygesuche{
	display: grid;
    grid-template: auto/1fr;
    margin-top: 35px;
    text-align: center;
     height: 610px;
	overflow: auto;
grid-row-gap:10px;}
	

.mygesuche > div{
	border-radius: 12px;
    background-color: var(--bgtransp1);
padding:2%;
border:1px solid var(--grey1);}

.mygesuche i{
	color:var(--schrift) !important;
font-size:1.1rem !important}

img.profileavatar{
	border-radius: 50%;
    border: 2px solid white;
	width:100px;
	height:100px;
	object-fit:cover
    }


.tooltipavatar .tooltipavatartext {
  visibility: hidden;
  min-width: 120px;
  background-color: var(--bg);
  color: var(--schrift);
  text-align: center;
  border-radius: 6px;
  padding: 5px;
	border:1px dotted var(--schrift);

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltipavatar:hover .tooltipavatartext {
  visibility: visible;
}



button.owl-prev, button.owl-next {
    font-size: 18px !important;
    background-color: grey !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
}



/*Start Mobile Profil*/

@media only screen and (max-width:1788px){
	.mygesuche, .profilescenesbox{
		grid-template-columns: 1fr !important;
	height:auto}
			
	button.owl-prev, button.owl-next{
		display:none !important;}
	
	.userprofile{
  grid-template: auto 60px 800px/1fr !important;
    margin-left:0 !important;
  }
	
	.profile2{
		grid-gap:30px !important;}
	
	.profile1-text{
	top:0 !important;
		width: auto !important;}
	
	span.profilename{
		padding-left:0 !important;
	font-size:3em !important}
	
	p.profiletext2{
		text-align:left !important;
	font-size:clamp(2rem,2rem + 2.5vw,6rem) !important}
	
	.panelnavi{
		grid-template: 60px/repeat(5, 1fr) !important;}
	
	img.profileavatar{
		width:60px !important;
		height:60px !important;}
	
	.profiletablinks{
		font-size:1.5em !important;}
	
	p.profilename2{
		font-size:clamp(2rem,2rem + 1vw,4rem)!important;
	white-space: normal !important;}
	
	.two{
		grid-area: 3/1/4/2 !important;}
	
	.profileside{
		justify-self: start !important;
		padding-right:2% !important
		}
	
	.profileside i{
		font-size:2em !important;}
	
	#About{
		grid-template:repeat(3,auto)/1fr !important;}
	
	#About .profileside{
		grid-template:0/repeat(10,1fr);
	display:grid}
	
	#RPGs, #Schreibprobe{
		grid-template:auto/100% !important;
		}
	
		#RPGs .profile-side{
		padding:0 !important;}
	
	.carousel2 .owl-stage-outer{
	overflow:visible !important;
padding-top:0 !important}
	
	
	.werke{
		height:auto !important;
	overflow:hidden !important;
	padding: 5% 0 0 2% !important;
	width:70vw}
	
	.profiletabcontent{
		overflow:hidden auto;
	}
	}
/*End mobile Profile*/


/*Start Desktop Profile*/
.userprofile{
  display:grid;
  grid-template:800px/500px 100px 1fr;
	  }

.profile1{
  background: linear-gradient(var(--bgtransp2), var(--bgtransp1)), url(/images/profilepic1.jpeg);
   background-repeat:no-repeat;
  background-size:cover
   }
.panelnavi{
  background-color:var(--accent);
   display:grid;
  grid-template: repeat(5,auto)/1fr;
  place-items:center
   }

.profile2{
  background:rgba(var(--komplopac));
  padding:2% 2% 2% 5%;
  display:grid;
  grid-template:repeat(2, auto)/75% auto;
  grid-column-gap:50px;
}

.profile1-text{
  padding:2% 2% 2% 5%;
  position:relative;
  top:120px;
  font-family:Arial;
  font-size:small;
  width:460px;
  text-align:justify
  }

span.profilename{
  font-size:5em;
  font-family:"Abril Fatface";
  }

p.profiletext1{
  margin-top:2em;
  width:330px;
  height:auto
}

p.profiletext2{
  font-family:'WindSong', cursive;
  font-size:clamp(2rem,2rem + 2.5vw,7rem);
  text-align:right;
	
	  }

p.profiletext2 strong{
	font-weight:400 !important}

p.profiletext2 i{
	display:none;}


.profile-side{
   width:100%;
   padding:2%;
   text-align:justify
    }


p.profilename2{
	font-size:clamp(2rem,2rem + 1vw,4rem);
  font-family:'WindSong', cursive;
  text-align:center;
  margin:0;
	color:var(--accent)
  }

.profilfelder{
  text-align:justify;
  width:auto;  
	background:var(--bgtransp1);
  padding:2%;
  height:590px;
  border-radius:6px;
  color:var(--schrift);
  overflow:auto;
  margin-top:-30px;
border:1px solid var(--grey1);
}

p.profilfelder > i{
  font-size:2em;
	color:var(--kompl)
}

p.felder{
  display:grid;
  grid-template:auto/50px 1fr;
  grid-gap:15px;
  align-items:center;
}


p.schreibprobe::-webkit-scrollbar, .mygesuche::-webkit-scrollbar{
  width:2px !important;
}
p.schreibprobe::-webkit-scrollbar-track, .mygesuche::-webkit-scrollbar-track{
  background-color:grey;
}

p.schreibprobe::-webkit-scrollbar-thumb, .mygesuche::-webkit-scrollbar-thumb{
  background-color:var(--accent)
}

.two{
  place-self:end;
  grid-area:2/1/3/3;
	     }

.profileside{
  align-self:center;
  justify-self:end;
  padding-right:50px
}

.profileside2{
  justify-self:start;
  align-self:center
  }


  .profileside i{
  color:var(--accent);
    font-size:3em;
    transition:0.3s
 }


.fa-heart:hover{
  font-weight:bold;
  color:#ef3453;
}

.fa-heart-broken:hover{
	color:dimgrey;}

.fa-shield-alt:hover{
  color:#5c301c;
  }

.fa-glass-cheers{
	color:rosybrown;}
	

.fa-flag:hover{
  font-weight:bold;
  color:red;
}

.fa-discord:hover{
  color:#7289da
}

.fa-envelope:hover{
  color:var(--accent)
}

.fa-at:hover{
  color:lightblue;
}

.profiletablinks{
  font-size:2em;
  color:white;
  background-color:transparent;
  border:none;
  transition:0.3s
}

.profiletablinks:hover{
  text-shadow:1px 1px 5px black !important;
  transform:scale(1.5) !important;
	color:white !important;
	border:none !important;
		background-color:transparent !important;
	font-size:2em
	}

.profileside i:hover{
  text-shadow:1px 1px 5px black !important;
  transform:scale(1.5) !important;
		}


.werke{
  height:280px;
	text-align:left
}

#Schreibprobe{
  grid-gap:30px;
  grid-template-columns:66% auto
}

#RPGs{
  grid-gap:30px;
  grid-template:auto/1fr
}

#RPGs .profile-side{
	width:650px;
}


#PB .profile-side{
	grid-area:1/1/3/3;}

span.anzahlnum{
	font-size:0.5em}