.point_active {
  background: var(--golden);
  width: 8px;
  height: 8px;
}

.mem_short {
text-align: justify;
  line-height: 170%;
}

.mem_user {
text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  text-transform: uppercase;
  font-size: 10px;
}

.mem_user span {
font-family: var(--mainfont);
  font-size: 30px;
  text-transform: lowercase;
}

.mem_fam {
margin-top:30px;
}

.mem_descr {
display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 15px;
	justify-content: center;
}

.mem_descr div b {
color:var(--golden);
}

.mem_descr div {
text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 150%;
  width: 23%;
}

.mem_quote {
width: 86.3%;
  display: flex;
  align-items: center;
  font-style: italic;
  font-size: 14px;
  font-family: var(--mainfont);
  color: var(--golden);
  justify-content: center;
}

.mem_top {
display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.time_name {
font-family: var(--mainfont);
  font-size: 17px;
  text-transform: lowercase;
  color: var(--golden);
}

.time_desc {
text-align: justify;
  line-height: 170%;
  padding: 0px 14px;
  padding-top: 7px;
}

.time_date {
font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.mem_past {
margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mem_trigger {
border: 1px solid var(--golden);
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
  padding: 10px;
}

.mem_trivia {
margin-top: 20px;
  text-align: justify;
  line-height: 200%;
}

.mem_eig {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mem_chara1 {
  width: 48.6%;
}

.rpgskill_bit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 45%;
}

.skill_bit {
  font-size: 9px;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
}

.skill_type {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--golden);
  letter-spacing: 3px;
}

.skill_types {
  width: 49.2%;
}

.profil_skill {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 10px;
}

.mem_element {
width: 100%;
  margin-top: 30px;
  text-align: center;
  font-size: 40px;
  opacity: 0.7;}

.bending-profile {
display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/*TABS*/

#tabmenu {
position: relative;
  margin: auto;
  margin-top: 50px;
}

#tabmenu [type="radio"] { display: none; }

#tabmenu [for^="tab"] {
position: absolute;
  top: 20px;
  border: 1px solid var(--line);
  padding: 3px;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  background: var(--accent1);
	justify-content:center;
}

#tabmenu [for="tab-1"] { 
right: 120px;
  top: 60px;
}

#tabmenu [for="tab-2"] { 
right: 120px;
  top: 100px;
}

#tabmenu [for="tab-3"] { 
right: 120px;
	top: 140px;
}
#tabmenu [for="tab-4"] { 
	right: 120px;
	top: 180px;
}

#tabmenu [for="tab-5"] { 
right: 120px;
	top: 220px;
}

#tabmenu [for="tab-6"] { 
right: 120px;
	top: 260px;
}

#tabmenu .tab-content {
position: absolute;
  box-sizing: border-box;
  width: 80%;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
height: 570px;
  border: 1px solid var(--line);
  background: var(--accent1);
	padding:20px;
}

#tabmenu input:checked + label {
   color: var(--golden);
}

#tabmenu input:checked + label + .tab-content {
    z-index: 1;
    opacity: 1;
}


/*GRUNDGERÜST*/

.memw_left {
width: 33%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.char-img {
--cut: 42px;
  --border: 2px;
  width: 300px;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  padding: var(--border);
  background: #aaa395;
  -webkit-mask: radial-gradient(circle at top left, transparent var(--cut), #000 calc(var(--cut) + 1px)) top left, radial-gradient(circle at top right, transparent var(--cut), #000 calc(var(--cut) + 1px)) top right, radial-gradient(circle at bottom left, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom left, radial-gradient(circle at bottom right, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom right;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle at top left, transparent var(--cut), #000 calc(var(--cut) + 1px)) top left, radial-gradient(circle at top right, transparent var(--cut), #000 calc(var(--cut) + 1px)) top right, radial-gradient(circle at bottom left, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom left, radial-gradient(circle at bottom right, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom right;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

.char-img::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;

  background-image: var(--img);
  background-size: cover;
  background-position: center;

  -webkit-mask: inherit;
  mask: inherit;
}

.mem_name {
width: 100%;
  margin-top: 70px;
  text-align: center;
  font-family: var(--mainfont);
  font-size: 30px;
  margin-bottom: 20px;
}

.memw_right {
width:67%;
}

.mem_wrapper {
margin-top: 31px;
	display: flex;
  flex-wrap: wrap;
}

.member_content {
background: #00000070;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.nav_mem {
height: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}